CSS:checked结合兄弟选择器实现单选多选

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS:checked配合兄弟选择器实现单选多选效果》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

:checked + ~ 选择器可控制同级后续兄弟元素显隐，要求 input 在前、目标元素在后且同父；单选用 name 分组独立控制，多选用 ~ 实现任一触发，需兼顾可访问性与兼容性。

用 :checked + ~ 选择器控制后续兄弟元素显隐

单选/多选按钮本身不可直接样式化，但借助 :checked 状态伪类和通用兄弟选择器 ~，能精准触发其后同级元素（如 label、span 或自定义提示框）的样式变化。关键前提是：目标元素必须是 input[type="checkbox"] 或 input[type="radio"] 的**后续兄弟节点**，且在同一父容器内。

常见错误是把要控制的元素放在 input 外层或前边，导致选择器完全不生效。例如：

<div>
  <label>选项一</label>
  &lt;input type=&quot;checkbox&quot;&gt;
</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">
  &lt;input type=&quot;radio&quot; name=&quot;theme&quot; id=&quot;light&quot;&gt;
  <label for="light">浅色</label>
  <div class="theme-preview" data-theme="light">…</div>

  &lt;input type=&quot;radio&quot; name=&quot;theme&quot; id=&quot;dark&quot;&gt;
  <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">
  &lt;input type=&quot;checkbox&quot; class=&quot;item-check&quot;&gt;
  <span class="item">条目1</span>
  &lt;input type=&quot;checkbox&quot; class=&quot;item-check&quot;&gt;
  <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，而是让这套机制在各种输入方式（鼠标、触屏、键盘）、各种辅助技术下都稳定工作。结构、语义、样式三者缺一不可。

到这里，我们也就讲完了《CSS:checked结合兄弟选择器实现单选多选》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！