CSS 的 :first-child 伪类仅匹配其父容器中第一个子元素，而非首个拥有某类名的元素；若需高兼容性地选中首个 .a 元素，应采用 .a:not(.a ~ .a) 或 .a ~ .a 反向重置方案。
css 的 :first-child 伪类仅匹配其父容器中第一个子元素，而非首个拥有某类名的元素；若需高兼容性地选中首个 .a 元素，应采用 .a:not(.a ~ .a) 或 .a ~ .a 反向重置方案。
在实际开发中，一个常见误区是误用 :first-child 来定位“带有某个类的第一个元素”。例如，以下代码本意是让第一个 <li class="a"> 文字变红，但实际无效：
<style>
.a:first-child { color: red; }
</style>
<body>
<ul>
<li>0</li>
<li title="1" class="a">1</li>
<li title="2" class="a">2</li>
<li title="3" class="a">3</li>
<li>4</li>
</ul>
</body>原因在于：.a:first-child 要求目标元素同时满足两个条件——既是 :first-child（即父元素 <ul> 的第一个子节点），又拥有类名 a。而示例中第一个 .a 元素是 <ul> 的第二个子元素（前面有 <li>0</li>），因此不匹配。
✅ 正确解法（推荐，纯 CSS，无 JS，兼容 IE9+）：
利用 CSS 通用兄弟选择器 ~ 的“后续同级”语义，先为所有 .a 设定样式，再用 .a ~ .a 将其后的所有同类元素样式重置：
.a {
color: red;
}
.a ~ .a {
color: inherit; /* 或其他默认值，如 #333 */
}该方案逻辑清晰：
- 所有 .a 默认红色；
- 任意 .a 元素之后出现的所有 .a 元素，颜色被覆盖为 inherit（继承父级颜色），从而仅保留第一个生效。
? 进阶写法（更语义化，推荐现代项目使用）：
CSS Selectors Level 4 引入了 :is() 和 :where()，但真正精准匹配“首个带类元素”的标准方案仍是：
.a:not(.a ~ .a) {
color: red;
}它直译为：“是 .a，且不是任何其他 .a 元素的后续兄弟”，等价于“首个 .a”。该写法更简洁、意图更明确，兼容 Chrome 105+、Firefox 103+、Safari 15.4+；若需支持旧浏览器，仍建议使用前述 ~ 方案。
⚠️ 注意事项：
- 避免依赖 :nth-of-type() 或 :nth-child(n) 模拟，因其依赖标签类型或位置序号，易受 DOM 结构变动影响；
- 不要混用 :first-of-type（按标签类型计数）与需求混淆；
- 若 DOM 动态生成，确保 CSS 规则加载顺序合理，避免被后置规则意外覆盖。
总结：:first-child 不等于“第一个带某类的元素”。掌握 :not(.a ~ .a) 或 .a ~ .a 重置模式，是解决此类问题的专业、健壮且无需 JavaScript 的 CSS 实践方案。
