:not(:first-child)不生效是因为:first-child匹配同级首个任意元素，若父容器含文本/注释/其他标签则div非:first-child；应改用:not(:first-of-type)或flex/grid的gap。

为什么 :not(:first-child) 有时不生效

直接写 div:not(:first-child) { margin-top: 12px; } 看似合理，但常发现第一个 div 没加边距、其余却全没反应——根本原因是：伪类匹配的是「在同级兄弟元素中排第一」的元素，而如果父容器里有其他类型节点（比如文本、注释、span），:first-child 就可能落在非目标元素上，导致 :not(:first-child) 匹配失败。

常见错误场景：

• HTML 中 <div> 前有空格或换行（解析为文本节点），此时第一个 <code><div> 实际是第二个子节点<li>父容器混用了 <code><p></p>、<span></span> 和 <div>，<code>:first-child 匹配的是第一个出现的任意元素，不一定是 div
• 用 Vue/React 动态渲染时，初始状态插入了占位元素（如 loading <div class="skeleton">），干扰了顺序判断<h3> <code>:not(:first-of-type) 才是更稳妥的选择

  当目标是「同类元素中的第一个」而非「所有子元素中的第一个」，应改用 :first-of-type。它只看标签名（或属性一致的元素类型），忽略中间穿插的其他节点。

  实操建议：

  • 对纯 div 列表：用 div:not(:first-of-type) { margin-top: 12px; }
  • 对带类名的组件：如 .card，写成 .card:not(:first-of-type) { margin-top: 16px; }（注意：:first-of-type 不识别 class，所以必须配合类选择器使用）
  • 若需兼容 IE8 及更早版本（已极少见），不能用 :not()，得改用相邻兄弟选择器：.card + .card { margin-top: 16px; }

  相邻兄弟选择器 + 的隐含限制

  .item + .item 看起来简洁，但它只作用于「紧挨着前一个同类型元素的元素」，意味着只要中间插入任何非 .item 元素（哪怕只是 <br> 或注释），后续的 .item 就不再匹配。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  典型陷阱：

  • 服务端模板中条件渲染导致 DOM 结构不连续
  • 用 v-if 或 {condition && <item></item>} 生成列表时，某些项被跳过，破坏了相邻关系
  • 动态插入内容后未重置样式逻辑，旧规则失效

  此时 :not(:first-of-type) 依然有效，而 + 会静默失效——这点容易被忽略。

  Flex/Grid 容器中更推荐用 gap

  如果父容器已是 display: flex 或 display: grid，直接用 gap 更干净，完全避开「首个元素」的判断逻辑：

  .list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  

  优势明显：

  • 无需关心子元素类型或顺序，gap 自动跳过首尾外侧
  • 支持响应式单位（如 gap: clamp(8px, 2vw, 16px)）
  • IE 不支持，但现代项目基本可放心用；若需降级，可叠加 * + * { margin-top: 12px; } 作 fallback

  真正复杂的点在于：你得先确认布局是否已用 Flex/Grid——很多人在传统文档流里硬套 gap，结果发现没效果，其实是忘了设 display。