:not(:first-child) 能解决兄弟间距问题，因为它精准避开首个元素，只对第二及之后的兄弟元素应用 margin-top，避免顶部多余空白，比手动加 class 或 JS 更简洁通用。
为什么 :not(:first-child) 能解决兄弟间距问题
直接给所有兄弟元素加 margin-top 会导致第一个元素顶部多出不需要的空白；用 :not(:first-child) 就能精准避开它，只对第二及之后的元素生效。这比手动加 class 或 JS 控制更干净，也避免了父容器需要额外 padding 的妥协方案。
:not(:first-child) 的典型写法和常见错误
正确写法是把伪类放在目标元素之后，比如给列表项设上边距：li:not(:first-child) { margin-top: 12px; }。容易错的地方有三个：
- 写成
:not(first-child)（漏掉冒号），浏览器直接忽略整条规则 - 写成
li:not(:first-of-type)—— 虽然多数情况效果一样，但语义不同：:first-child要求是父元素的第一个子节点且类型匹配，:first-of-type只要求同类型中排第一，混用时可能漏掉或误选 - 在 Flex/Grid 容器里对子项用
margin-top，可能触发对齐干扰（比如align-items: center下 margin 不起作用），此时改用gap更稳妥
和 gap 对比：什么时候该用哪个
gap 是现代布局的首选，但受限于容器类型和浏览器支持（IE 完全不支持）。:not(:first-child) 优势在于通用性——不管容器是 div、ul 还是 span 块级化，都能用。实际选择看场景：
- Flex 或 Grid 布局 → 优先用
gap，简洁且无副作用 - 需要兼容 IE 或老安卓 WebView → 只能靠
:not(:first-child)+margin - 元素动态增删（如 Vue/React 列表）→
:not(:first-child)自动生效，无需监听 DOM 变化 - 要控制“仅上下间距”或“仅左右间距”且不能影响对齐 →
margin更可控
嵌套结构里容易忽略的层级陷阱
如果目标元素嵌套在多层容器中，比如 .card > .content > p，别直接写 p:not(:first-child) —— 它判断的是 p 在其**直接父容器**中是否为首个子元素，而不是在整个卡片区块里。结果可能是每个 .content 下的第一段都无 margin，但视觉上仍显拥挤。
立即学习“前端免费学习笔记（深入）”；
这时要么提升选择器层级：.content > p:not(:first-child)，要么改用更明确的定位方式，例如给 .content 加 display: flow-root 再统一处理子 p，或者干脆用 :has()（注意兼容性，Chrome 105+ 支持）：.content:has(p:nth-of-type(2)) p:not(:first-child)。
真正麻烦的不是写法，而是审查元素时看到 margin 生效了，却没意识到它作用在哪个父级上 —— 多点两下开发者工具的“Computed”面板，看 margin-top 究竟被哪条规则 applied。
