为什么:not(:last-of-type)
在以下情况下不工作?我该如何修复它?
JSF中间文件:http://jsfiddle.net/C23g6/589/
超文本:
<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;
}
4条答案
按热度按时间8mmmxcuj1#
如前所述,原因是
:last-of-type
匹配的元素是其元素类型的最后一个兄弟元素,在本例中为div
,由于最后一个div
不是最后一个.comment
,因此不匹配。与类的第一个元素不同,没有办法使用纯CSS来匹配类的 last 元素,即使使用覆盖也不行。您应该使用现有结构的信息来创建一个选择器,以匹配您要查找的元素,例如:
如果做不到这一点,可以向最后一个
.comment
添加一个额外的类名并将其排除,或者修改结构本身以满足您的需要。oalqel3c2#
如果您结构从未更改,则:
最简单的方法就是:一个月一次,一个月一次
:not()
仍然具有局限性。cgyqldqp3#
我也通过了这个问题,我只创建了一个.last-child类,并将最后一个元素设置为.last-child。所以当我不能这样做时:
db2dz4w84#
如果你的html结构没有改变,你可以使用它,因为. comment div后面总是跟着. hello div。
:nth-last-of-type()CSS伪类根据元素在相同类型(标记名称)的同级元素中的位置(从末尾算起)来匹配元素。
输入:https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type