css伪类:not用法

这篇文章发表于 2022年07月17日,星期日,04:06
css伪类:not用法

**:not()**在平时的工作中使用的频率还是蛮高的,今天总结记录一下它的用法和处于实验性的用法。

**:not()**用来匹配不符合一组选择器的元素,防止特定的元素被选中,也被称为反选伪类。但是不能使用:not(:not)的写法。

css:

vw { color: #666; display: block; } vw:not(.vw-a) { color: #ff0000; }

html:

<vw class="vw-a vw-b">vw-a vw-b</vw> <vw class="vw-c vw-d">vw-c vw-d</vw>

效果:

可以看到**class="vw-c vw-d"**的颜色是红色,**class="vw-a vw-b"**被排除在外了。

上面演示的就是**:not()**选择器的用法。点击查看示例

:not()多参数

**:not()**还有一项试验性的用法,就是支持多个以逗号分隔的选择器作为参数。就以前这样的写法

vw:not(selectorA):not(selectorB)

现在可以使用下面的写法了

vw:not(selectorA, selectorB)

通过逗号的形式分隔选择器,效果如下。

<vw class="vw-a vw-b">vw-a vw-b</vw> <vw class="vw-c vw-d">vw-c vw-d</vw>
vw { color: #666; display: block; } vw:not(.vw-c, .vw-d) { color: #00ff00; }

效果:

上面的效果看起来是一样的,其实还是有区别的。那就是权重不一样了,第一种vw:not(selectorA):not(selectorB)等同于vw.selectorA.selectorB,第二种的vw:not(selectorA, selectorB)等同于vw.selectorA或者vw.selectorB,所以第二种的权重没有第一种高了。

下面来做一个实验,html跟上面一样:

<vw class="vw-a vw-b">vw-a vw-b</vw> <vw class="vw-c vw-d">vw-c vw-d</vw>

css进行修改:

vw { color: #666; display: block; } vw:not(.vw-c):not(.vw-d) { color: #ff0000; } vw:not(.vw-c, .vw-d) { color: #00ff00; }

上面的css中联级的:not()写在多参数:not()的前面,如果权重一样,那么vw:not(.vw-c, .vw-d) 将覆盖vw:not(.vw-c):not(.vw-d)的样式,但是实际如下:

多参数的兼容性

目前chrome、firefox、safari都支持多参数not选择器