: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 可以让颜色或位置变化更平滑，提升用户体验。
