CSS选择类型的最后一个，而不是子类型

Question

我有一个带孩子的元素，其中一些孩子自己也有孩子，其中一些使用共享的CSS类。

我想做的是选择主元素的最后一个子元素，而不是最后一个子子元素。

到目前为止，我已经尝试了两种方法：

最后一个孩子

.some-class:last-child {
background: lightblue;
}

<div class="container">
<div class="some-class">one</div>
<div>
<div class="some-class">sub-one</div>
<div class="some-class">sub-two</div>
</div>
<div class="some-class">two</div>
</div>

最后一个类型

.some-class:last-of-type {
background: lightblue;
}

<div class="container">
<div class="some-class">one</div>
<div>
<div class="some-class">sub-one</div>
<div class="some-class">sub-two</div>
</div>
<div class="some-class">two</div>
</div>

您将看到这两个都有two和sub-two以蓝色突出显示。。。我只是想突出显示two。

Answer 1

您可以直接在.container之后瞄准.some-class的最后一个元素

.container > .some-class:last-child {
background: lightblue;
}

<div class="container">
<div class="some-class">one</div>
<div>
<div class="some-class">sub-one</div>
<div class="some-class">sub-two</div>
</div>
<div class="some-class">two</div>
</div>

Answer 2

使用子>组合子：

.container>.some-class:last-child {
background: lightblue;
}

<div class="container">
<div class="some-class">one</div>
<div>
<div class="some-class">sub-one</div>
<div class="some-class">sub-two</div>
</div>
<div class="some-class">two</div>
</div>

请注意，CSS中没有last-of-class选择器。上面片段中的选择器执行以下操作：

.container>.some-class:last-child

1. 它选择所有元素，这些元素是其父元素的最后一个子元素
2. 然后，它删除没有CSS类some-class的元素
3. 然后，它删除所有不是CSS类container元素的子元素的元素

然后将CSS声明应用于剩余的元素。