Question

我想获取所有课程名称（＆＃39; my-class ＆＃39;）并将其颜色更改为红色 EXCEPT 最后一个

显然我一直在谷歌搜索，并没有这样的事情：上课或其他什么。我无法在不使用JS 的情况下找到的作品。

div1和div2都是动态的！如果div2不存在，那么div1应该有第一个p元素为红色而第二个不是。

请注意我留下了一个＆＃39; p＆＃39;标记在顶部，因为我不希望它成为我的选择器的一部分。我只需要我的班级＆＃39;具体

或者是否有一个选择器我可以用来抓住我容器内的所有＆＃34; p＆＃34; s包括嵌套的P＆＃39;

<p>Some text</p> <div class="my-container"> <div class="div1"> <p class="my-class"></p> <p class="my-class"></p> </div> <div class="div2"> <p class="my-class"></p> <p class="my-class"></p> <p class="my-class"></p> <p class="my-class"></p>  </div> </div>

我也可以使用sass，所以如果需要，请随意添加。

Answer 1

我不知道任何可以执行此操作的SINGLE规则，但一个简单的解决方法是结合使用2个单独的规则：

.my-class {
  color: red;
}

.div-2 .my-class:last-child {
  color: // whatever you want the default to be
}

请注意，订单很重要，设置最后一个孩子的颜色应该在首先设置好后完成

Answer 2

这将获得您在没有任何强制重排的情况下寻找的行为：

＆＃13;

.my-class:not(:last-child) {
    color: red;
}

＆＃13;

<p>Some text</p>
<div class="my-container">
  <div class="div1">
    <p class="my-class">a</p>
    <p class="my-class">b</p>
  </div>
  <div class="div2">
    <p class="my-class">c</p>
    <p class="my-class">d</p>
    <p class="my-class">e</p>
    <p class="my-class">f</p>   <!-- This tag should not be red-->
  </div>
</div>

＆＃13;

Answer 3

您可以使用下面的解决方法。

使用div:last-child。这将选择div中的最后一个container，如果只有一个，则会选择它，所以......最后p的最后div将是其他颜色（在本例中）

.my-container div p.my-class { 
color:red;
}
.my-container div:last-child p.my-class:last-child { 
color:blue;
}

<p>Some text</p>
<div class="my-container">
  <div class="div1">
    <p class="my-class">a</p>
    <p class="my-class">a</p>
  </div>
  <div class="div2">
    <p class="my-class">a</p>
    <p class="my-class">a</p>
    <p class="my-class">a</p>
    <p class="my-class">b</p>   <!-- This tag should not be red-->
  </div>
</div>

CSS抓住所有班级名称除了最后

3 个答案: