:not(:first-child) 更可靠，因其只对非首子元素生效，避免首项溢出、适配任意容器、不依赖js、兼容ssr，且不受父容器display类型限制。
为什么 :not(:first-child) 比 margin-top 更可靠
直接给列表项加 margin-top 会导致顶部多出一段空白，尤其当列表被嵌套或动态渲染时，父容器上边距不可控。而 :not(:first-child) 只作用于除首个子元素外的所有项，天然规避了“首项溢出”问题，且不依赖元素是否为 li 或是否在 ul 中——只要它是某个父容器的非首子元素，就能生效。
- 适用于任意容器：
div、section、article，不限定语义化标签 - 不破坏文档流，不会因父容器
overflow: hidden切掉首项上边距 - 服务端渲染（SSR）或静态生成（如 Next.js）中，无需等待 JS 注入样式即可生效
:not(:first-child) 的典型写法与常见失效原因
最简写法是 *:not(:first-child) { margin-top: 1rem; }，但实际项目中应更精确：
- 优先用类名限定范围，避免全局污染：
.list-item:not(:first-child) { margin-top: 0.75rem; } - 慎用
*:not(:first-child)：通配符会匹配所有非首子元素（包括span、button），拖慢 CSS 解析 - 注意伪类层级：若元素本身有
display: flex或display: grid，:first-child仍按 DOM 顺序判断，不受视觉排列影响 - IE 不支持
:not()带复合选择器（如:not(:first-child):not(:last-child)），单个:not(:first-child)在 IE9+ 可用
替代方案对比：gap vs :not(:first-child)
gap 更简洁，但有硬性前提：父容器必须是 display: flex 或 display: grid。一旦容器是 block（默认）或含浮动/绝对定位子项，gap 完全无效。
-
gap无法作用于非 Flex/Grid 容器，而:not(:first-child)无此限制 -
gap对齐逻辑统一，但无法单独控制某一项的间距（比如首项加粗时想缩小其上间距） - 混合使用场景：Flex 容器内用
gap，再用:not(:first-child)微调特定项（如跳过图标项）：.item-icon + .item-text:not(:first-child) { margin-top: 0.5rem; }
容易被忽略的边界情况
这个选择器看似简单，但在真实项目里几个点常被漏掉：
- 空文本节点或注释节点会被浏览器视为
:first-child，导致样式错位 —— 确保 HTML 中没有无意义的换行或注释出现在首项前 - 动态插入元素时（如
appendChild），新节点若插在开头，原“首项”变成第二项，:not(:first-child)会自动重算，这是优势，但需确认 JS 未手动添加冗余 class 干扰样式 - 若用
visibility: hidden隐藏首项，它仍是:first-child；但用display: none后，下一个可见元素成为新的:first-child
真正优雅的间距，不靠“加多少”，而在于“谁该有”。选对锚点，比调十次像素值更省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
