:checked伪类可实现无需JavaScript的交互效果。1. 控制元素显隐：利用+或~选择器，选中复选框时显示关联内容；2. 自定义复选框样式：隐藏原生控件，通过label和::after伪元素绘制美观对勾；3. 制作开关按钮：结合transition实现滑动动画，选中时背景变色、滑块右移；4. 多级菜单或选项卡：用radio配合~选择器，切换不同面板内容。关键在于html结构合理，input位于目标元素前以确保选择器生效。
:checked 是 css 中一个非常实用的伪类选择器，主要用于匹配处于“选中状态”的单选按钮（radio）或复选框（checkbox）。虽然它本身不能改变表单元素的逻辑行为，但结合 HTML 和 CSS 可以实现丰富的视觉交互效果。以下是几个常见的使用技巧和实用场景。
1. 控制其他元素的显示与隐藏
利用 :checked 配合相邻兄弟选择器（+）或通用兄弟选择器（~），可以控制页面中其他元素的显示或隐藏，无需 JavaScript。
例如：点击复选框展开/收起内容区域。
<input type="checkbox" id="toggle"> <label for="toggle">点击展开内容</label> <div class="content">这里是被隐藏的内容</div>
#toggle + .content { display: none; } #toggle:checked + .content { display: block; }
这样，当复选框被选中时，后面的 .content 就会显示出来。
立即学习“前端免费学习笔记（深入）”；
2. 制作自定义样式复选框
默认的复选框样式在不同浏览器中表现不一致。:checked 可以配合隐藏原生控件，用 CSS 绘制更美观的自定义样式。
<input type="checkbox" id="custom-checkbox"> <label for="custom-checkbox" class="custom-checkbox"></label>
#custom-checkbox { display: none; } .custom-checkbox { width: 18px; height: 18px; border: 2px solid #ccc; display: inline-block; position: relative; cursor: pointer; } #custom-checkbox:checked + .custom-checkbox::after { content: "✔"; color: #4CAF50; font-size: 14px; position: absolute; top: -2px; left: 2px; }
通过隐藏原始 input，使用 label 模拟点击，并用 ::after 添加对勾符号，实现跨浏览器一致的视觉效果。
3. 实现开关（Toggle switch）效果
将复选框变成现代风格的滑动开关，提升界面体验。
<input type="checkbox" id="switch"> <label for="switch" class="switch"></label>
.switch { width: 50px; height: 24px; background: #ddd; border-radius: 12px; position: relative; display: inline-block; transition: background 0.3s; } .switch::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: white; top: 2px; left: 2px; transition: left 0.3s; } #switch:checked + .switch { background: #4CAF50; } #switch:checked + .switch::after { left: 28px; }
选中时背景变绿，小圆球滑动到右侧，形成典型的开关样式。
4. 多级菜单或选项卡切换
使用多个 radio 或 checkbox，结合 :checked 和 ~ 选择器，可实现无 JS 的选项卡或折叠菜单。
例如：用 radio 模拟单选选项卡：
<input type="radio" name="tab" id="tab1" checked> <label for="tab1">首页</label> <input type="radio" name="tab" id="tab2"> <label for="tab2">设置</label> <div class="panel" id="home">首页内容</div> <div class="panel" id="settings">设置内容</div>
.panel { display: none; } #tab1:checked ~ #home, #tab2:checked ~ #settings { display: block; }
通过 ~ 选择器选中对应面板，实现简单的标签页切换。
基本上就这些。合理使用 :checked 能减少对 JavaScript 的依赖，提升页面响应速度，同时让交互更直观。关键是结构要清晰，input 必须在相关元素之前或附近，确保选择器能正确匹配。不复杂但容易忽略细节。