正确解法是.error:not(.error ~ .error)，它精准选取同一父容器下第一个.error元素，不依赖标签类型或是否为首个子节点，兼容IE9+。

只给第一个 .error 元素加边框，别用 :first-child

很多人一想“第一个”，就直奔 :first-child，结果发现没生效——因为那个元素很可能不是父容器的第一个子节点（前面可能有 <label></label>、<div> 或空白文本节点）。真正要的是“第一个匹配到的 <code>.error”，得用 :first-of-type 或更稳妥的 :nth-of-type(1)？不，这两个也看标签类型，不是按类选的。正确解法是 :is(.error):not(.error ~ .error)，但兼容性差；更通用、兼容性好的写法是：.error:not(.error ~ .error)。

这个选择器的意思是：“是 .error，且后面**没有其他兄弟节点也是 .error**”——等价于“它是所有 .error 中最靠前的那个”。它不依赖标签名，不依赖是否为首个子元素，只关心同类元素的相对位置。

• ✅ 适用于任意嵌套结构，哪怕 .error 分散在不同 <div> 里（只要在同一个父容器下） <li>⚠️ 注意：必须所有目标 <code>.error 在**同一父级**内，跨父容器需分别处理
• ❌ 不要写成 .error:first-of-type，它只找第一个 <div class="error">，如果第一个 <code>.error 是 <p class="error"></p> 就失效

  HTML 结构影响选择器有效性，得看 DOM 层级

  假设你有一组表单项，错误提示混在输入框、span、label 之间：

  <form>
    <label>用户名</label>
    <input>
    <span class="error">不能为空</span>
    <label>邮箱</label>
    <input>
    <span class="error">格式错误</span>
  </form>

  此时 .error:not(.error ~ .error) 能精准命中第一个 <span class="error"></span>；但如果把两个 .error 放在不同 <div> 下（比如各自包了 <code><div class="field">），它们就不再处于同一父容器，该选择器会同时匹配两个——因为每个 <code>.error 在自己父级里都是“后面没别的 .error”。

  立即学习“前端免费学习笔记（深入）”；

  

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

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

  下载
  • ✅ 解决办法：确保所有待筛选的 .error 共享一个直接父容器（如统一用 <form></form> 或加个 wrapper <div class="errors-container">） <li>✅ 或改用 JS 动态加类：<code>document.querySelector('.error') 拿第一个，再 classList.add('error-first')，然后写 .error-first { border: 1px solid red; }

  和 :nth-child(1) 混用会出问题

  有人试过 .error:nth-child(1)，发现完全不生效。这是因为 :nth-child(1) 要求该元素**本身是父容器的第一个子元素**，而 .error 几乎不会是第一个——前面总有 <label></label> 或 <input>。即使写成 .error:nth-child(2)，也只对“恰好排第二”的那个生效，不具备泛用性。

  • ❌ .error:nth-child(n) 本质是“第 n 个子元素，且带 .error 类”，不是“第 n 个 .error”
  • ✅ 真正表示“第 n 个同类元素”的是 :nth-of-type()，但它按标签名分组，不是按 class
  • ⚠️ 所以别指望纯 CSS 的 :nth-* 系列能可靠定位“第 n 个 class”，除非你控制 HTML 结构并只用单一标签

  要不要考虑伪元素或 JS 回退？

  如果项目要兼容 IE11，.error:not(.error ~ .error) 是安全的（IE9+ 支持 :not() 和通用兄弟选择器 ~）；但若需要支持更老版本，或者结构实在复杂（比如错误提示分散在多个无共同父级的区域），就得换思路。

  • ✅ 最简回退：服务端/JS 渲染时，直接给第一个错误项加专属类，如 <span class="error error-first"></span>
  • ✅ CSS-in-JS 或框架用户（React/Vue）：用状态标记第一个错误，避免纯 CSS 探测逻辑
  • ⚠️ 别用 ::before + content 模拟红框——它不能替代 border 影响布局，且 focus outline 之类交互效果会错位
  实际项目里，.error:not(.error ~ .error) 够用，但前提是 DOM 结构可控。一旦错误提示来自不同组件、不同渲染时机，CSS 就无能为力——这时候加个 class 比折腾选择器更省事，也更可维护。