:checked + ~ 选择器可控制同级后续兄弟元素显隐，要求 input 在前、目标元素在后且同父；单选用 name 分组独立控制，多选用 ~ 实现任一触发，需兼顾可访问性与兼容性。
用 :checked + ~ 选择器控制后续兄弟元素显隐
单选/多选按钮本身不可直接样式化，但借助 :checked 状态伪类和通用兄弟选择器 ~，能精准触发其后同级元素（如 label、span 或自定义提示框）的样式变化。关键前提是：目标元素必须是 input[type="checkbox"] 或 input[type="radio"] 的**后续兄弟节点**，且在同一父容器内。
常见错误是把要控制的元素放在 input 外层或前边，导致选择器完全不生效。例如：
<div> <label>选项一</label> <input type="checkbox"> </div>
此时 input ~ label 匹配不到——label 不是 input 的兄弟，而是其前一个兄弟；而 input:checked ~ label 更不会触发。
- 正确 DOM 结构必须是
input在前，被控制元素紧随其后（同级） - 若需点击文字也能触发，
label应包裹input或用for关联，但样式控制仍靠input:checked ~ * -
~是“通用兄弟”，匹配所有符合条件的后续兄弟；若只想要紧邻的下一个，用+，但实际中~更灵活
radio 单选组中用 :checked 高亮唯一选中项的关联内容
单选场景下，常需根据选中项切换面板、颜色或文案。只要所有 input[type="radio"] 共享同一 name，就能通过各自 :checked 状态独立控制对应后续内容。
比如切换主题色：
<div class="theme-selector"> <input type="radio" name="theme" id="light"> <label for="light">浅色</label> <div class="theme-preview" data-theme="light">…</div> <input type="radio" name="theme" id="dark"> <label for="dark">深色</label> <div class="theme-preview" data-theme="dark">…</div> </div>
对应 CSS：
.theme-preview { display: none; }
#light:checked ~ .theme-preview[data-theme="light"],
#dark:checked ~ .theme-preview[data-theme="dark"] {
display: block;
}
- 注意：多个
:checked规则必须分开写，不能合并成#light:checked, #dark:checked ~ .theme-preview——后者语法错误，且逻辑不对 - 若预览块位置不在对应
input正后方（比如中间插了其他元素），~仍能匹配，但需确保它们确属同一父容器下的兄弟 - 移动端点击区域小，建议给
label加display: block和足够内边距，提升可点性
checkbox 多选时用 :checked 组合选择器叠加样式
多选场景下，可能需要「任一选中就显示操作栏」「全部选中才启用按钮」等逻辑。纯 CSS 可实现前者，后者需 JS 辅助（CSS 无法表达“全选中”条件）。
例如：任一复选框选中，就显示底部工具栏：
<div class="list"> <input type="checkbox" class="item-check"> <span class="item">条目1</span> <input type="checkbox" class="item-check"> <span class="item">条目2</span> <div class="toolbar">批量操作</div> </div>
CSS：
.toolbar { display: none; }
.item-check:checked ~ .toolbar { display: block; }
- 只要任意一个
.item-check:checked出现，.toolbar就会显示——这是~的天然行为，无需额外逻辑 - 如果工具栏放在所有
input之前，此方案失效；此时只能换结构，或改用 JS 监听change事件 - 注意浏览器兼容性：
:checked在 IE9+、所有现代浏览器均支持，但 IE8 及更早版本不支持，需降级处理
容易忽略的细节：隐藏原生控件与可访问性平衡
为了自定义外观，常把 input 设为 position: absolute; opacity: 0 或 clip: rect(0 0 0 0)。但这会影响屏幕阅读器识别，也破坏键盘导航（空格/回车无法触发）。
- 推荐用
clip-path: inset(50%)或position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;——既视觉隐藏，又保留在可访问树中 - 务必保留
label并正确关联（for或包裹），否则键盘用户无法聚焦操作 - 不要仅依赖
:checked控制交互反馈，比如选中时改变背景色，也要同步设置input:focus + label样式，满足键盘焦点状态可见性要求
真正难的不是写出 :checked ~ .xxx，而是让这套机制在各种输入方式（鼠标、触屏、键盘）、各种辅助技术下都稳定工作。结构、语义、样式三者缺一不可。
