css伪类选择器

`:has`选择器

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

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

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

<div>
    <P class='box'>我是蓝色的</P>
    <P>我也是</P>
</div>

alt
包装共性选择器。例如

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

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

<div><i>我们都被选中了</i></div>
<p><i>我们都被选中了</i></p>
<div><span>我们都被选中了</span></div>
<p><span>我们都被选中了</span></p>

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

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

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

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

选择class不是.box的div元素

<div class="box">我没被选中</div>

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

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

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