css选择器 :is(),not(),:where(),:has()

June 23, 2022

`:is()`

兼容性：https://caniuse.com/css-matches-pseudo
接受选择器参数列表，对其中每一个选择器，都等效于此伪类被替换为该选择器的效果
该选择器的优先级由列表中最高的优先级决定

css

:is(header, main, footer) p:hover {
    color: red;
    cursor: pointer;
}

/* 以上内容相当于以下内容 */
header p:hover,
main p:hover,
footer p:hover {
    color: red;
    cursor: pointer;
}

也可以连续使用，比如

css

:is(a, b, c) :is(x, y, z) u {
}

`:where()`

此选择器同 :is()
但选择器优先级始终为 0，即拥有最低优先级

`:not()`

:not() 原本只支持一个选择器作为参数，现在也支持选择器参数列表。选中规则同 :is()

`:has()`

:has() 选中当前元素，当且仅当参数声明的 相对选择器列表 能够选中 任意元素

相对选择器列表参数是可容错的。通常在 CSS 中，选择器列表中的某个选择器无效时，那么整个列表则被视为无效。
当 :has() 选择器列表中的一个选择器无法解析时，不正确或不受支持的选择器将被忽略，而其他的则将被正常使用。

html

<h1>aqua</h1>
<h2>blue</h2>

<style>
    h1 + h2 {
        /* 紧接在 h1 后面的 h2 */
        color: blue;
    }

    h1:has(+ h2) {
        /* h1，当且仅当存在 h2 紧接这个 h1 后面*/
        color: aqua;
    }
</style>

←Back to home