兄弟选择器严格按DOM结构匹配同级元素：+要求紧邻，~匹配后续所有同级；空白节点、注释或中间元素均导致+失效；无前兄弟选择器，:has()可间接向上影响但兼容性有限。
兄弟选择器不是“选一组兄弟”，而是严格按 DOM 结构和位置关系匹配同级元素——用错一个符号或结构稍有偏差，样式就完全不生效。
h2 + p 不生效？检查是否真为「紧邻」兄弟
相邻兄弟选择器 + 要求目标元素必须是前一个元素的**下一个同级、紧挨着的兄弟节点**，中间不能有任何其他元素（包括 div、span，甚至注释或空白文本节点）。
- ✅ 有效：
<h2>标题</h2> <p>正文</p>→h2 + p匹配成功 - ❌ 失效：
<h2>标题</h2> <div>说明</div> <p>正文</p>→ 中间插了div，h2 + p完全不匹配 - ⚠️ 隐形坑：HTML 换行缩进可能生成空白文本节点，比如
<h2>标题</h2>\n<p>正文</p>在某些解析模式下也可能被视作非紧邻（尤其在 XML 或 strict 模式中）
想选后面所有 p？改用 ~ 通用兄弟选择器
~ 的语义是“同一父容器下、出现在指定元素之后的所有符合条件的兄弟元素”，对中间插入的内容不敏感，鲁棒性高。
- 适用场景：标题后可能穿插图片、广告
div、引用块等，但仍希望统一控制后续所有p的行高或缩进 - 示例：
h2 ~ p { line-height: 1.6; }会命中<h2>标题</h2> <img><aside></aside><p>段落1</p> <p>段落2</p>中的两个p - 注意：
~只向右匹配，不回溯；也不跨父级——h2 ~ p不会匹配嵌套在子div里的p
兄弟选择器只能向后，不能向前选
CSS 没有“前兄弟选择器”。如果你写 p + h2，它只匹配那些前面紧挨着 p 的 h2；但无法实现“让某个 h2 前面的 p 变色”这种需求。
- 常见误操作：试图用
h2 + p控制标题上方说明文字 → 必须调整 HTML 顺序，把p放到h2后面，再用h2 ~ p或h2 + p反向控制 - 替代思路：用 JS 动态加 class，或改用 Flex/Grid 的 order 属性视觉重排，而非依赖选择器方向
- 现代方案：CSS
:has()（如div:has(> h2)）可间接实现部分“向上影响”，但目前仍需考虑 Safari/旧版 Chrome 兼容性
和 :checked 配合做交互时，DOM 顺序是硬约束
用 checkbox 控制后续内容显隐，本质就是 input[type="checkbox"]:checked ~ .target。一旦结构错位，交互立刻失效。
- 必须保证：
input和目标元素同属一个父容器，且input在目标元素之前 - 错误结构：
<div> <div class="target">内容</div> <input type="checkbox"> </div>→:checked ~ .target永远不触发 - 正确写法：
<div> <input type="checkbox" id="toggle"><label for="toggle">展开</label><div class="target">隐藏内容</div> </div>，配合#toggle:checked ~ .target { display: block; } - 性能提示：
~和+是 CSS 中极快的选择器，浏览器可单向扫描完成，比后代选择器
真正容易被忽略的不是语法，而是 DOM 节点的“可见性”——换行、空格、注释都会成为兄弟关系中的真实节点。调试时打开浏览器开发者工具的“显示空白节点”选项，比反复猜结构更直接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
