纯CSS联动要求HTML结构严格：可触发元素必须在前，目标元素紧邻其后且同级同父；input:checked + label失效常因label位置错误或中间存在其他节点；+选择器只匹配紧邻兄弟，~匹配后续所有同级元素。
能用纯 CSS 实现联动，前提是 HTML 结构满足“可触发元素在前、目标元素紧挨其后、同级同父”——不满足就别硬套 +，否则样式死活不生效。
为什么 input:checked + label 有时没反应
常见错误是 DOM 顺序错了：label 写在 input 前面，或者中间插了其他元素（哪怕只是换行或注释节点，不影响渲染但影响兄弟关系）。input:checked + label 要求 label 必须是 input 的**下一个同级兄弟节点**。
- ✅ 正确结构：
<input type="checkbox"><label>我被控制</label> - ❌ 错误结构：
<label>点我无效</label><input type="checkbox">（反向不支持） - ❌ 错误结构：
<input type="checkbox"><div>中间挡路</div><label>我也失效</label>（不是“紧邻”） - label 必须通过
for属性或嵌套绑定到 input，否则点击不触发:checked
div:hover + p 在卡片列表里只影响当前项
这是 + 最实用的场景：利用父容器隔离作用域。只要每个卡片是独立的 <div class="card">，里面的触发元素和目标元素都在同一层级，悬停就不会跨卡片污染。
- 结构示例：
<div class="card"><button>Hover me</button><p class="desc">只改我</p></div> - CSS 写法：
button:hover + .desc { color: #007bff; } - 注意：如果 button 被包在
<div>里（比如<div class="btn-wrap"><button>...</button></div>），那button:hover + .desc就失效了——因为 .desc 不再是 button 的兄弟，而是它的堂兄弟 - 此时应改为：
.btn-wrap:hover + .desc，前提是 .btn-wrap 和 .desc 确实紧邻且同级
该用 + 还是 ~？看目标是否“唯一紧邻”
+ 只认“正后方第一个”，~ 认“后面所有同级”。选错会导致样式漏控或误伤。
立即学习“前端免费学习笔记（深入）”；
- 要给列表项之间加竖线：
.item + .item::before { content: "|"; }——+精准，首项无前缀 - 要让单选按钮选中后高亮它后面所有提示文字（校验文案、帮助图标、建议列表）：
input[type="radio"]:checked ~ .hint { opacity: 1; }——~必须，因为提示元素不一定紧挨着 -
h2 + p清除标题后第一段首行缩进；h2 ~ p会把标题后所有段落都清掉，通常不是你想要的 - 动态插入内容时，新元素若未紧邻原元素，
+失效；~更鲁棒，但语义更宽泛
真正容易被忽略的是：空格、换行、HTML 注释在源码里看着是“相邻”，但在 DOM 树里它们是文本节点，会打断兄弟关系。调试时打开浏览器开发者工具，盯着 Elements 面板看实际节点顺序，比肉眼读代码靠谱得多。
