css – ：not(：last-of-type)不适合上课

为什么不：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;
}

解决方法

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

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

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

或者如果没有,请在最后一个.comment中添加一个额外的类名,并将其排除,或以其他方式更改结构本身以满足您的需求.

原文地址：https://www.jb51.cc/css/216095.html