使用 last-child 多次覆盖 CSS 在 first-child 工作的地方不起作用 [重复]

Question

我遇到了关于覆盖 css 的问题，我们将不胜感激。

我们有一个元素列表，其中一些“li”具有活动类

<ul class="the_track">
  <li class="active">One</li>
  <li class="active">Two</li>
  <li class="active">Three</li>
  <li class="active">Four</li>
  <li class="active">Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

默认情况下，所有这些都具有“#CCC”的背景。

ul.the_track li{
  background:#CCC;
}

所有具有'active'类的li都有'#F00'覆盖'#CCC'的背景

ul.the_track li.active{
  background:#F00;
}

现在进入问题区域，根据我的要求，我希望再次覆盖活动类。

ul.the_track li.active:first-child{
  /* this is working */
  background:#777;
}

但是，

ul.the_track li.active:last-child{
  /* this should not work */
  background:#CCC;
}

所以，基本上第一个孩子覆盖在没有最后一个孩子的地方工作，因为它不是容器的最后一个孩子，但是如何访问最后一个孩子有没有不涉及 JS 的替代 CSS 解决方案？。

这是上面代码的sn-p

（对于codepen爱好者http://codepen.io/shyamaprasad/pen/WGQjXk）：

ul.the_track li{
  background:#CCC;
}
ul.the_track li.active{
  background:#F00;
}
ul.the_track li.active:first-child{
  /* this is working */
  background:#777;
}
ul.the_track li.active:last-child{
  /* this one should not work */
  background:#CCC;
}

<ul class="the_track">
  <li class="active">One</li>
  <li class="active">Two</li>
  <li class="active">Three</li>
  <li class="active">Four</li>
  <li class="active">Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

Answer 1

在 css 中，:first-child 和:last-child 不适用于课间 (.active)。它必须从块的第一个开始，然后只有:first-child 可以工作，并以块的最后一个结束，然后只有:last-child 可以工作。

示例：在下面的.active:first-child 和.active:last-child 将不起作用。

<ul class="the_track">
  <li>One</li>
  <li class="active">Two</li>
  <li class="active">Three</li>
  <li class="active">Four</li>
  <li>Five</li>
</ul>

示例：在下面的.active:first-child 和.active:last-child 将起作用。

<ul class="the_track">
  <li class="active">One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="active">Four</li>
  <li class="active">Five</li>
</ul>

我们可以使用 jquery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("ul.the_track li.active").last().css("background","#000");
});
</script>


<ul class="the_track">
  <li class="active">One</li>
  <li class="active">Two</li>
  <li class="active">Three</li>
  <li class="active">Four</li>
  <li class="active">Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

 <style>
ul.the_track li{
  background:#CCC;
}
ul.the_track li.active{
  background:#F00;
}
ul.the_track li.active:first-child{
  background:#777;
}

 </style>
 

Answer 2

根据您的 HTML 最后一个“li”标签，不包含“活动”类：

<li>Eight</li>

有两种解决方案：

1) 将“活动”类添加到 li 即<li class="active">Eight</li>

2) 从 css 中删除“.active”

ul.the_track li:last-child{ 
/*style*/
}