:checked伪类通过选中状态触发样式变化，结合label和兄弟选择器可实现自定义复选框、展开收起面板及主题切换等交互效果，核心是隐藏input、用label控制状态并以CSS响应。
在CSS中，:checked 伪类可以用来选择处于“选中”状态的单选按钮（radio）或复选框（checkbox）。虽然它本身不能直接响应用户的交互动作，但结合HTML标签和相邻兄弟选择器等机制，可以实现无需JavaScript的交互式界面效果。
基本原理：利用 :checked 状态切换样式
:checked 会匹配所有被用户选中的 <input type="radio"> 或 <input type="checkbox"> 元素。一旦这些输入控件被勾选，就可以通过CSS改变它们自身或关联元素的外观。
- 隐藏原始输入框，用自定义样式替代
- 通过
label标签控制 input 的选中状态 - 使用
+或~选择器影响后续元素的显示
示例1：自定义复选框样式
将默认的 checkbox 替换为视觉更美观的样式。
HTML结构：<input type="checkbox" id="custom-checkbox"> <label for="custom-checkbox">点击我</label>CSS样式：
#custom-checkbox {
display: none;
}
#custom-checkbox + label {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
position: relative;
cursor: pointer;
}
#custom-checkbox:checked + label::after {
content: "✔";
color: #4CAF50;
font-size: 16px;
position: absolute;
top: -1px;
left: 3px;
}
当用户点击 label 时，checkbox 被选中，:checked 生效，显示对勾符号。
立即学习“前端免费学习笔记（深入）”；
示例2：展开/收起内容区域
使用 checkbox 和 :checked 实现可折叠面板。
HTML：
<input type="checkbox" id="toggle-content" style="display:none;"> <label for="toggle-content">点击展开内容</label> <div class="content"> 这里是被隐藏的内容。 </div>CSS：
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
#toggle-content:checked ~ .content {
max-height: 100px;
}
利用 ~ 通用兄弟选择器，在 checkbox 被选中时，动态改变后面内容块的高度，实现平滑展开动画。
示例3：单选按钮切换主题风格
用 radio 按钮切换页面配色方案。
HTML：<input type="radio" name="theme" id="light" checked> <label for="light">浅色</label> <input type="radio" name="theme" id="dark"> <label for="dark">深色</label> <div class="theme-area"> 页面内容 </div>CSS：
#dark:checked ~ .theme-area {
background: #333;
color: white;
}
#light:checked ~ .theme-area {
background: white;
color: black;
}
通过两个互斥的 radio 按钮，控制同一区域的不同视觉表现。
基本上就这些。利用 :checked 配合 label 和选择器，能实现开关、菜单、选项卡甚至轻量级模态框等交互效果，适合静态页面或需要减少JS依赖的场景。关键是把 input 隐藏，用 label 做触发入口，再用CSS响应状态变化。
