input:checked ~ li 失效是因为该选择器仅匹配同级且位于其后的li元素，若input与li不同级或不在同一父容器内则无效；正确结构要求二者为同级兄弟且input在前，否则需改用js或调整html。
为什么 input:checked ~ li 有时完全不生效
因为 CSS 的通用兄弟选择器 ~ 只能选中「在 DOM 中位于该 input 元素之后、且同级」的 li，而全选框通常不在列表项的前面——它可能被包在 header 里，或和 li 不在同一父容器下。一旦结构不满足「同级 + 后置」，样式就彻底失效。
实操建议：
- 检查全选框（
<input type="checkbox">）与目标li是否都在同一个父元素内，且input在li之前 - 避免用
display: none或visibility: hidden隐藏全选框——这不会影响选择器逻辑，但容易让人误判结构 - 若全选框在
ul外（如放在section顶部），~无法跨父级匹配，必须重构 HTML 或改用 JS
input:checked ~ li 的正确 HTML 结构长什么样
必须让 input 和 li 是同级兄弟节点，且 input 在前。常见有效结构如下：
<div class="list-container">
<input type="checkbox" id="select-all"><label for="select-all">全选</label>
<ul>
<li>选项 1</li>
<li>选项 2</li>
<li>选项 3</li>
</ul>
</div>
注意：上面的 li 并不直接跟在 input 后面，中间隔着 label 和 ul，所以仍不满足 ~ 条件。真正有效的写法是：
<div class="list-container"> <input type="checkbox" id="select-all"><label for="select-all">全选</label> <li>选项 1</li> <li>选项 2</li> <li>选项 3</li> </div>
也就是说：li 必须是 input 的同级后续兄弟，不能嵌套在 ul 内。否则就得放弃纯 CSS 方案。
想保留 ul > li 结构？只能靠 JS 或调整选择器范围
如果坚持语义化结构（ul 包裹 li），~ 确实无解。这时有两个务实选择：
- 用 JS 监听全选框变化，动态给
ul添加类（如is-all-checked），再写ul.is-all-checked li { ... } - 把全选框放进
ul第一项：<ul> <li class="select-all"> <input type="checkbox"> 全选</li>...</ul>，然后用ul li.select-all input:checked ~ li——但注意，~仍只作用于li.select-all同级的后续li，所以所有li必须平铺在ul下，不能有分组或嵌套 - 性能上，
:checked ~ li是纯 CSS 渲染，无重排开销；但结构约束太强，实际项目中 80% 场景会因 HTML 组织方式被迫弃用
容易被忽略的兼容性与副作用
:checked 本身兼容 IE9+，但组合使用 ~ 时，IE 对「动态插入的兄弟节点」支持不稳定——比如 JS 动态追加 li，IE 可能不重新计算样式。
- 移动端 Safari 对
:checked ~ *的重绘较慢，大量li（>50 个）时滑动可能卡顿 -
input若设为position: absolute或opacity: 0，不影响选择器，但需确保它仍存在于正常文档流中（不能用display: none） - 如果页面有多个全选框，每个都依赖
~，务必用唯一 ID 和属性选择器限定范围，例如#bulk-select-1:checked ~ li[data-group="1"]，否则会互相干扰
真正可靠的全选控制，往往不是靠一个选择器，而是靠结构约束 + 明确的父子关系意识。别硬套 ~，先看 DOM 能不能配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
