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

前端之家收集整理的这篇文章主要介绍了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中添加一个额外的类名,并将其排除,或以其他方式更改结构本身以满足您的需求.

猜你在找的CSS相关文章