css :not(:last-of-type)对类无效

x6492ojm  于 2023-01-27  发布在  其他
关注(0)|答案(4)|浏览(468)

为什么: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;
}
8mmmxcuj

8mmmxcuj1#

如前所述,原因是:last-of-type匹配的元素是其元素类型的最后一个兄弟元素,在本例中为div,由于最后一个div不是最后一个.comment,因此不匹配。
与类的第一个元素不同,没有办法使用纯CSS来匹配类的 last 元素,即使使用覆盖也不行。您应该使用现有结构的信息来创建一个选择器,以匹配您要查找的元素,例如:

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

如果做不到这一点,可以向最后一个.comment添加一个额外的类名并将其排除,或者修改结构本身以满足您的需要。

oalqel3c

oalqel3c2#

如果您结构从未更改,则:

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

最简单的方法就是:一个月一次,一个月一次
:not()仍然具有局限性。

cgyqldqp

cgyqldqp3#

我也通过了这个问题,我只创建了一个.last-child类,并将最后一个元素设置为.last-child。所以当我不能这样做时:

element:not(.las-child){
  /*your style*/
}
db2dz4w8

db2dz4w84#

如果你的html结构没有改变,你可以使用它,因为. comment div后面总是跟着. hello div。

.comment:nth-last-of-type(n+4) {
    color: red;
}
<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>

:nth-last-of-type()CSS伪类根据元素在相同类型(标记名称)的同级元素中的位置(从末尾算起)来匹配元素。
输入:https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type

相关问题