相邻兄弟选择器“+”仅匹配紧邻前一元素的同级元素，要求二者同父且中间无任何节点；写法为A+B，用于间距控制时可避免末尾冗余空白，如p+p{margin-top:1.2em}。
相邻兄弟选择器 + 的基本写法和限制
相邻兄弟选择器 + 只匹配**紧挨在前一个元素后面**的同级元素，且二者必须有相同的父容器。它不跨层级、不跳过、不回溯。
- 写法是
A + B，表示「B 是 A 的下一个兄弟元素」，A 和 B 必须是同一父元素下的直接子元素 - 如果中间插了其他元素（哪怕只是文本节点或注释），
+就失效 - 它不选中所有后续兄弟，只选中「第一个」符合条件的；要选中所有后续，得用通用兄弟选择器
~
控制 div 或 p 之间间距的典型用法
想让连续的段落或区块之间保持统一间距，又不想给每个元素都加 margin-bottom（否则末尾会多出多余空白），+ 是最干净的解法。
/* 给所有紧跟在 p 后面的 p 元素加顶部间距 */
p + p {
margin-top: 1.2em;
}
<p>/<em> 同理，用于卡片类 div </em>/
.card + .card {
margin-top: 16px;
}- 这样只有第二个及之后的
p有margin-top，首段不会多出空隙 - 比用
:not(:first-child)更轻量，兼容性也更好（IE7+ 支持+，但:not()在 IE8 中仅支持单个简单选择器） - 注意：不要写成
p + * { margin-top: ... }—— 通配符在+后虽合法，但性能差且易误伤
+ 和 ~ 在间距控制中的取舍
当需要跳过中间元素影响后续样式时，+ 不够用，就得换 ~；但多数间距场景其实不需要它。
-
h2 + p：只给紧跟在h2后的第一个p加样式（比如强调导语） -
h2 ~ p：给这个h2后面**所有**同级p都加样式（比如整节正文段落统一缩进） - 做间距时，
~容易造成意外叠加 —— 比如.item ~ .item { margin-top: 8px; }会让第 2 个元素有 1 个margin-top，第 3 个有 2 个，以此类推
容易被忽略的 DOM 结构陷阱
相邻兄弟选择器失效，90% 是因为 HTML 结构没对齐。常见坑：
立即学习“前端免费学习笔记（深入）”；
- 父容器里混入了
script、comment或纯文本（包括换行缩进产生的空白文本节点）—— 浏览器会把它们当作真实节点，打断「相邻」关系 - 用了 Flex/Grid 布局后，视觉顺序和 DOM 顺序不一致，
+仍按 DOM 顺序匹配，不是视觉顺序 - 动态插入元素时，如果新节点不是直接 append 到父容器末尾，而是 insertBefore 某个现有节点，可能破坏原有
+关系
调试时打开浏览器开发者工具，确认目标元素在 Elements 面板中确实是紧邻的、无间隔的同级节点。
