:checked伪类用于控制选中状态的表单元素样式，可实现复选框文本变色、自定义开关按钮及显示隐藏内容等交互效果，结合label和兄弟选择器能脱离javaScript完成动态样式切换，兼容IE9+和现代浏览器。
在css中，:checked 是一个非常实用的伪类选择器，主要用于单选按钮（radio）、复选框（checkbox）以及下拉选项（option）等表单元素被选中时的样式控制。通过它，我们可以实现不依赖javascript的交互式视觉效果，比如改变选中项的颜色、显示隐藏内容或切换开关样式。
1. :checked 伪类的基本用法
:checked 只在表单控件处于“选中”状态时生效。常见使用场景是配合 input[type=”checkbox”] 或 input[type=”radio”]。
示例：让选中的复选框旁边的文本变色：
<input type="checkbox" id="agree"> <label for="agree">我同意条款</label>CSS代码：
立即学习“前端免费学习笔记（深入）”；
#agree:checked + label { color: green; }说明：当复选框被勾选时，其后紧跟的 label 文字颜色变为绿色。
2. 结合 label 实现自定义样式
由于原生的 input 样式难以美化，通常会隐藏原始输入框，用 label 来模拟按钮或开关，并通过 :checked 控制样式变化。
示例：创建一个简单的开关按钮
<input type="checkbox" id="toggle" class="toggle-input"> <label for="toggle" class="toggle-label"></label>.toggle-input { display: none; } .toggle-label { width: 60px; height: 30px; background-color: #ccc; border-radius: 15px; position: relative; cursor: pointer; } .toggle-label::after { content: ''; position: absolute; width: 26px; height: 26px; background: white; border-radius: 50%; top: 2px; left: 4px; transition: left 0.3s; } .toggle-input:checked + .toggle-label { background-color: #4CAF50; } .toggle-input:checked + .toggle-label::after { left: 34px; }此时点击 label，会触发 checkbox 的选中状态，从而改变背景色和滑块位置，实现视觉上的开关效果。
3. 控制其他元素的显示或样式
利用相邻兄弟选择器（+）或通用兄弟选择器（~），可以控制页面中其他非表单元素的外观。
示例：点击复选框显示一段说明文字
<input type="checkbox" id="show-info"> <p class="info-text">这是一段额外信息</p>.info-text { display: none; } #show-info:checked ~ .info-text { display: block; color: #333; }当复选框被选中时，后面的 .info-text 段落会显示出来。
4. 注意事项与兼容性
- :checked 支持现代主流浏览器，包括 IE9+，移动端完全支持。
- 必须确保 label 的 for 属性正确指向 input 的 id，否则无法触发交互。
- 隐藏原始 input 推荐使用 display: none 或视觉移位技巧，避免影响可访问性。
- 结合 transition 可以让颜色或位置变化更平滑，提升用户体验。
基本上就这些。通过灵活运用 :checked 伪类，你可以实现丰富的无js交互效果，既轻量又高效。