:not(:first-child) 能避免 margin-top 重叠，因其只给第二个及之后的子元素设 margin-top，跳过首项溢出问题，不依赖父容器样式或额外 class，语义清晰且结构安全。
为什么 :not(:first-child) 能避免 margin-top 重叠
直接给子元素设 margin-top 会导致第一个元素顶部多出空白，而父容器又没设 padding-top 来“承接”它——这是常见视觉错位的根源。用 :not(:first-child) 把 margin “后置”，只作用于第二个及之后的元素，天然绕开首项溢出问题。
关键在于：它不依赖父容器样式干预，也不需要额外 class 控制，纯靠结构逻辑排除。
-
:not(:first-child)匹配的是「在同级中不是第一个」的元素，和是否可见、是否被 JS 动态插入无关 - 它不改变文档流，不影响
box-sizing或display行为 - 注意：如果父容器里有注释节点或文本节点（比如换行空格），
:first-child可能意外匹配到它们，导致选择失败——确保子元素是连续的、无干扰的标签节点
:not(:first-child) 和 :nth-child(n+2) 选哪个
两者效果几乎一样，但行为底层不同：
-
:not(:first-child)是布尔排除：先找所有子元素，再剔除第一个；语义清晰，可读性强 -
:nth-child(n+2)是位置计算：从第 2 个开始逐个匹配；性能略优（尤其在大量子元素时），但理解成本稍高 - 兼容性上，
:not()在 IE9+ 支持，但 IE9 不支持:not()嵌套伪类（这里没嵌套，所以安全）；:nth-child()IE9+ 同样可用 - 若后续要扩展成“跳过前两个”，
:nth-child(n+3)比:not(:first-child):not(:nth-child(2))简洁得多
实际写法：用 margin-top 还是 margin-bottom
绝大多数场景推荐统一用 margin-top 配合 :not(:first-child)：
- 垂直流布局中，
margin-top更符合阅读习惯（间距属于“当前元素和上面元素之间”） - 当列表可能被 JS 动态追加时，
margin-top不会影响新元素的底部对齐；而margin-bottom在末尾会多出一段无意义空白 - 如果父容器设置了
overflow: hidden或border，margin-top不会触发 BFC 边界问题，margin-bottom在某些 flex 容器中可能被忽略 - 示例：
.list-item:not(:first-child) { margin-top: 12px; }
容易被忽略的边界情况
这个技巧简洁，但几个细节不处理就会翻车：
- 响应式断点切换时，如果子元素数量变化（比如从 4 个变 1 个），
:not(:first-child)规则自动失效——这本身是优点，但得确认设计稿是否允许单元素时无间距 - 使用
display: flex或grid的父容器中，:first-child仍按 DOM 顺序判断，不受order属性影响；想按视觉顺序排除，得改用 JS 或重新组织 HTML - 服务端渲染（SSR）或静态生成页面中，若首项被
v-if/*ngIf移除，:first-child会指向新的第一个元素，规则依然生效——这点很稳，不用额外 guard
真正麻烦的是嵌套列表：外层用了 :not(:first-child)，内层也用，结果子项的子项又被加了一次 margin。这时候得靠更具体的选择器限定范围，比如 .menu > .menu-item:not(:first-child)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
