Question

为什么:not(:last-of-type)在以下情况下无效？我该如何解决？

JSFiddle ：http://jsfiddle.net/C23g6/589/

HTML：

<div class="comment">This is Red</div>
<div class="hello">------------------</div>
<div class="comment">This is Red</div>
<div class="hello">------------------</div>
<div class="comment">Shouldn't be Red</div>
<div class="hello">------------------</div>

CSS：

.comment:not(:last-of-type) {
    color: red;
}

Answer 1

如上所述，原因是因为:last-of-type匹配的元素是其元素类型的最后一个兄弟，在本例中为div。由于上一个div不是最后一个.comment，因此不匹配。

与the first element of a class不同，没有办法使用纯CSS来匹配类的 last 元素，甚至不能使用覆盖。您应该使用有关现有结构的信息来创建与您要查找的元素匹配的选择器，例如：

.comment:not(:nth-last-child(2))

或者如果不这样做，请在最后一个.comment添加一个额外的类名，并将其排除，或以其他方式改变结构本身以满足您的需求。

Answer 2

如果您的结构永远不会改变，那么：

div {
    color:red;
}
:nth-last-of-type(2) {
    color: black;
}

这是一种简单的方法： DEMO ，demo 2

:not()仍有限制。

：not（：last-of-type）不适合上课

2 个答案: