:is()伪类选择器 :where()伪类选择器

1.1 :is()伪类选择器

在日常写代码中，经常遇见重复的同一个元素在不同的标签中的情况，这样我们想要统一写一个这个元素的样式时就会比较麻烦，稍加不注意就会出现错误。例如:

li a,
artcile a,
section a {
color: #000000;
}
h1 a,
h2 a,
h3 a {
color: blue;
}

使用 CSS :is() 伪类选择器

CSS中的:is()伪类选择器可以解决这样的问题，并把最终的选择器视为匹配到的那一个。

:is(li, article, p) a {
color: #999999;
}

:is(h1, h2, h3) a {
color: green;
}

这样写不仅是简单了很多，实现的效果也是一样的。

同时，:is()也可以用在各种选择器的组合中，例如子节点选择器、邻居选择器等：

例如下面的子节点选择器：

:is(article, p) :is(h2, li) a {
color: #ff3344;}
展开就等于：

article h2 a,
article li a,
p h2 a,
p li a {
color: #ff3344;
}

与其它伪类选择器结合

:is()还可以与其他伪类选择器结合者使用，例如当一个文章所有的 h1-h6 标题，hover 的时候，在后面加上一个 "Hello Word"，如果使用传统的方式，我们会写成：

h1:hover::after,
h2:hover::after,
h3:hover::after,
h4:hover::after,
h5:hover::after,
h6:hover::after {
content: "Hello Word";
}

在使用:is()后可以写成：

:is(h1, h2, h3, h4, h5, h6):hover::after {
content: "Hello Word";
}

这样对比下来，：hover伪类选择器、::after伪元素都只需要写一次

几个重要的特性

    :is() 伪类函数的列表值是宽松的：如果列表中的选择器是无效的，规则将继续匹配有效的选择器

   :is() 选择器的权重是根据其列表来计算的

   :is() 伪类函数的列表值中不能使用伪元素（至少到目前为止是这样）

   :is() 伪函数的成组

兼容性

目前还是正在逐步规范化的新特性，:is() 伪类选择器的兼容性在目前主流的浏览器的版本都是兼容的。

1.2:where()伪类选择器

：where()的功能和用法和:is()完全一致。唯一的区别在于，:where()的优先级始终是0.

.btn span > a:hover,
#header span > a:hover,
h3#footer span > a :hover ,{
content: "Hello Word";
}

这样去写

:where(.btu,#header,#footer) span >a:hover{
content: "Hello Word";
}