利用:checked与:not(:checked)伪类可实现无需JavaScript的动态样式切换，通过隐藏原生控件并结合label和兄弟选择器~或+，能自定义复选框、单选框样式，控制选项外观、实现选项卡等内容切换，提升交互体验。
在网页开发中，常需要根据复选框或单选框的选中状态动态改变样式。利用CSS伪类 :checked 与否定伪类 :not(:checked)，可以无需JavaScript实现视觉反馈，提升用户体验。
基本概念：:checked 与 :not(:checked)
:checked 匹配被选中的单选框（radio）或复选框（checkbox）。:not(:checked) 则匹配未被选中的控件。这两个伪类可直接用于input元素，也可配合
常见用法包括：
- 隐藏默认输入框，用自定义样式替代
- 通过 ~ 或 + 选择器影响后续元素的显示
- 实现开关按钮、选项卡、模态框等交互效果
自定义复选框样式
通过隐藏原生复选框，使用label模拟视觉样式，并结合:checked控制外观。
立即学习“前端免费学习笔记（深入）”；
input[type="checkbox"] {position: absolute;
opacity: 0;
}
.checkbox-label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 8px;
}
input:checked + .checkbox-label::before {
background-color: #007bff;
border-color: #007bff;
}
input:not(:checked) + .checkbox-label::before {
background-color: white;
}
点击label时触发input状态变化，::before伪元素根据是否选中显示不同背景。
单选框组的样式控制
对于单选框，常需在多个选项中突出当前选中项。可用:not(:checked)弱化非选中项。
.radio-option {
padding: 10px;
border: 1px solid #ddd;
transition: all 0.2s;
}
input[type="radio"]:checked ~ .radio-option {
background-color: #007bff;
color: white;
}
input[type="radio"]:not(:checked) ~ .radio-option {
background-color: #f9f9f9;
color: #666;
opacity: 0.7;
}
这种方式适合构建视觉清晰的选择面板，如支付方式、主题切换等。
结合通用兄弟选择器实现复杂布局
使用 ~ 可以让选中状态影响同级的其他元素，例如实现无JS的选项卡或内容切换。
示例：点击某个radio按钮，只显示对应内容区，其余隐藏。
.tab-content {display: none;
}
input[value="tab1"]:checked ~ #content1,
input[value="tab2"]:checked ~ #content2 {
display: block;
}
input:not(:checked) ~ .tab-content {
display: none;
}
这种结构依赖input位于内容块之前，通过~选择器控制显示逻辑。
基本上就这些。合理使用:checked和:not(:checked)，能有效减少对JavaScript的依赖，提升页面响应速度与可访问性。关键是结构清晰、选择器准确，避免样式冲突。
