css - :not(:last-of-type) not working for class

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 中添加一个额外的类名并将其排除，或者以其他方式更改结构本身以满足您的需要。