相邻兄弟选择器（+）可实现无JS的元素联动，要求触发元素与目标元素同级且紧邻，通过:checked、:hover等状态控制后续元素样式，但无法反向选择或跨层级匹配。
用 CSS 实现相邻元素的联动样式，核心是利用 相邻兄弟选择器（+） 配合 HTML 结构中的语义顺序和状态控制（如 :checked、:hover、:focus 等），让前一个元素的状态“触发”后一个元素的样式变化。
相邻兄弟选择器的基本用法
相邻兄弟选择器 A + B 表示：**当 B 紧跟在 A 后面，且两者父元素相同**，才匹配 B。它不跨层级、不跳过元素，只认“紧挨着的下一个同级元素”。
-
input[type="checkbox"] + label→ 选中紧跟其后的 label -
h2 + p→ 仅匹配紧跟在 h2 后面的那个 p，不是所有后续 p - 不生效的情况：
div > span + p中若 span 和 p 不是同级（比如 p 在 span 内部），就不会匹配
用表单控件驱动相邻内容显示/隐藏
这是最典型、无 JS 的联动场景：利用 input[type="checkbox"] 或 input[type="radio"] 的 :checked 状态，配合 + 控制紧邻的元素（如说明文字、面板、图标）。
<input type="checkbox" id="show-more"> <label for="show-more">点击展开</label> <div class="detail">这里是隐藏的详细内容</div>
CSS：
立即学习“前端免费学习笔记（深入）”；
#show-more:not(:checked) + label + .detail {
display: none;
}
#show-more:checked + label + .detail {
display: block;
}
注意：这里用了 + label + .detail，因为 .detail 并不直接跟在 checkbox 后，中间隔了 label，所以需链式写法。
结合 :hover 或 :focus 实现交互反馈
鼠标悬停或聚焦某个元素时，影响其后相邻元素的样式，适合导航、表单提示等场景。
-
button:hover + .tooltip→ 按钮悬停时显示旁边的提示框 -
input:focus + .hint→ 输入框获得焦点时高亮提示文字 - 限制：目标元素必须在 HTML 中严格位于触发元素之后且同级
注意事项与常见坑
相邻兄弟选择器能力强大但有硬性约束，实际使用中容易踩坑：
- 无法“反向选择”：不能写
label + input:checked去选中前面的 input（CSS 不支持上溯） - 结构必须严格：中间不能插入其他同级元素（哪怕是个空
<span></span>也会断开链路） - 动态插入内容时无效：JS 插入的新节点若未按预期位置放置，选择器不自动生效
- 可搭配
:has()做增强（但注意兼容性：Chrome 105+ / Safari 15.4+ 支持，Firefox 尚未全面支持）
不复杂但容易忽略细节，关键是把状态源（checkbox、focus、hover）放在 HTML 中靠前的位置，让需要联动的元素紧随其后、同级排列，再用 + 精准“点名”。
