CSS :first-child选择器不生效如何解决？附完整代码示例

问题根因 #

:first-child 选择器的匹配规则是选中同时满足两个条件的元素：

• 该元素是其父节点的第一个子元素（不限制子元素的类名、类型）
• 该元素匹配你写的前置选择器（这里就是.circle）

你贴的这段演示代码本身可以正常生效，因为<body>的第一个子元素就是.circle类的div，第一个色块会正常展示红色和动画效果。如果你实际运行时不生效，几乎都是真实页面结构里，.circle的父元素下第一个子节点不是.circle元素，常见场景包括：

• 父元素开头存在其他标签（比如<script>、<noscript>、注释、空文本节点）
• 你把.circle放在了更深层的容器内，容器第一个子元素不是.circle
• 你误以为:first-child可以匹配「相同类名的第一个元素」，但CSS本身没有提供「按类名匹配第一个」的原生选择器

解决方案 #

根据使用场景选对应方案即可：

1. 如果你确定所有.circle都是同种标签（你这里都是div），可以换成:first-of-type选择器，它会匹配父元素下第一个div标签且类名为circle的元素，不受父元素开头其他类型标签的影响：

.circle:first-of-type {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 6s;
  animation-timing-function: linear;
}

2. 如果你需要兼容不同标签的同类名元素，用相邻兄弟选择器反向过滤：

/* 先给所有.circle加样式 */
.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 6s;
  animation-timing-function: linear;
}
/* 再把后面所有跟在.circle后面的.circle元素样式重置 */
.circle ~ .circle {
  background: none;
  animation: none;
  /* 其他需要重置的属性 */
}

3. 也可以直接给第一个元素单独加额外类名控制，兼容性最好，逻辑也最清晰：

<body>
  <div class="circle first"></div>
  <div class="circle"></div>
</body>
<style>
.circle.first {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 6s;
  animation-timing-function: linear;
}
</style>

内容的提问来源于stack exchange，提问作者edwin gerry