Question

我面临着关于覆盖css的问题，我们将不胜感激。

我们有一个元素列表，其中一些＆＃39; li＆＃39;有活跃的课程

<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>

默认情况下，所有这些都具有＆＃34;＃CCC＆＃34;。

的背景

ul.the_track li{
  background:#CCC;
}

所有带有“活跃”的人课程的背景是＆＃39;＃F00＆＃39;覆盖＃CCC＆＃39;

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;
}

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

以下是上述代码的片段

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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 last“li”标记，不包含“active”类：

<li>Eight</li>

有两种解决方案：

1）向li添加“active”类即<li class="active">Eight</li>

2）从css中删除“.active”

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

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

2 个答案: