:has选择器

选择某元素下，符合条件的元素。例如

1
2
3
div:has(.box) {
    color: blue;
}

选择包含类名为.box的div元素

1
2
3
4
<div>
    <P class='box'>我是蓝色的</P>
    <P>我也是</P>
</div>

:is选择器

alt

包装共性选择器。例如

1
2
3
:is(div, p) :is(span, i) {
    color: blue;
}

选择div和p标签下的span和i标签

1
2
3
4
<div><i>我们都被选中了</i></div>
<p><i>我们都被选中了</i></p>
<div><span>我们都被选中了</span></div>
<p><span>我们都被选中了</span></p>

注意:不支持选中伪元素，优先级为选择器本身的优先级

:where选择器

与is选择器相同，区别在于:where选择器的优先级总是0。

:not选择器

匹配不符合指定选择器的元素。例如

1
2
3
div:not(.box) {
    color: blue;
}

选择class不是.box的div元素

1
2
3
4
<div class="box">我没被选中</div>

<div>我们被选中了</div>
<div class="yi">我们被选中了</div>

注意:未指定:not前边的宿主选择器，:not会选中body；:not不能嵌套

参考文章：浅谈逻辑选择器