CSS :first-child选择器在<li>中失效问题求助

问题原因 #

.a:first-child 选择器要求元素同时满足两个条件：

1. 拥有.a类
2. 是父元素的第一个子元素

你的代码里，<ul>的第一个子元素是不带.a类的<li>0</li>，所以这个选择器匹配不到目标元素，无法生效。

解决方案 #

方案1：使用CSS4的nth-child(n of .a)选择器（现代浏览器支持） #

该选择器会先从父元素的子元素中筛选出带.a类的元素，再选择其中的第一个：

.a:nth-child(1 of .a) {
  color: red;
}

方案2：使用兄弟选择器实现兼容（支持旧浏览器） #

先给所有.a类的<li>设置红色，再通过兄弟选择器给第一个.a之后的.a元素恢复默认颜色：

.a {
  color: red;
}
.a ~ .a {
  color: initial;
}

完整代码示例（以方案2为例） #

<style>
  .a {
    color: red;
  }
  .a ~ .a {
    color: initial;
  }
</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>

内容的提问来源于stack exchange，提问作者Peppa Pig