用label包裹radio/checkbox并配合:checked与~兄弟选择器可实现无js持久切换；关键要求是input与内容同级、name一致、结构严丝合缝，否则样式失效。

直接用 label 包裹 input[type="checkbox"] 或 input[type="radio"]，再配合 :checked + 相邻/兄弟选择器，就能实现点击后样式持久切换——不需要 JS，也不依赖事件监听。

label 嵌套 checkbox 实现整行点击切换

这是最轻量、语义最清晰、无障碍支持最好的方式。浏览器原生支持 label 内任意位置（文字、空白、图标）点击都触发 input 状态变更。

• 必须把 input 直接写在 label 开始标签和结束标签之间，不能靠 for 和 id 显式关联（那样无法保证整行触发）
• 给 label 加 display: block 和 cursor: pointer，确保视觉可感知、键盘可聚焦
• 别对 input 用 display: none —— 它会破坏屏幕阅读器焦点流；改用视觉隐藏（如 position: absolute; clip: rect(0 0 0 0);）
• 示例结构：

  <label style="display:block; cursor:pointer">
    <input type="checkbox" name="agree">
    我已阅读并同意条款
  </label>

radio + label 实现导航项持久高亮

单选框的 :checked 状态天然“记忆”，适合做菜单选中态、标签页激活态等需要视觉锁定的场景。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• input[type="radio"] 必须放在对应 label **之前**，才能用 +:checked + label 选中后续元素
• 隐藏 radio 用 display: none 是安全的，因为它的状态仍被 CSS 伪类读取
• 高亮样式要写在 .nav-radio:checked + .nav-item 这类选择器上，不是 label:hover
• 注意 name 属性必须一致，否则无法互斥；至少一个 radio 要带 checked 属性，否则初始无高亮

用 ~（通用兄弟选择器）控制远距离内容显隐

当要切换的内容不在 label 紧邻位置（比如 tab 内容区在 label 下方隔了几层），就得用 ~ 而不是 +。

• ~ 匹配的是**后面所有同级兄弟元素**，+ 只匹配紧挨着的下一个
• HTML 结构里，所有 input、label、内容 div 必须是同一父容器下的直系子元素，否则 ~ 失效
• 例如：要让 #tab2:checked ~ #content2 显示，那 #content2 就得和 #tab2 在同一个 .tab-container 下，且顺序在它之后
• 不支持跨父级、不支持嵌套层级内查找，这点容易踩坑

为什么 click 之后样式又消失了？常见失效原因

不是 CSS 写错了，大概率是 HTML 结构或选择器链断了。

• radio/checkbox 没有 name 属性（radio 尤其关键）→ 状态无法维持互斥
• label 和 input 的包裹关系错误：比如 label 里只放了文字，input 在外面 → 点击无效
• CSS 中用了 :focus 或 :hover 代替 :checked → 那只是临时态，失去焦点就恢复
• 写了 input { display: none } 但没加 label 的交互样式 → 用户看不见反馈，以为没点上
• 动态渲染时（如 React）漏掉了 checked 属性绑定，或用 defaultChecked 但没同步状态 → 初始渲染对，交互后错

真正难的不是写对一行 CSS，而是让 input、label、内容节点三者在 DOM 树中的相对位置和选择器逻辑严丝合缝——差一个层级、少一个空格、错一个 name，整个切换就静默失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！