新型 CSS 函数伪类选择器 :is() 和 :where()
编写 CSS 时，您有时最终需要使用很长的选择器列表，从而以相同的样式规则定位多个元素。例如，如果要调整标题元素内找到的任何 <b> 标记的颜色，您可以编写以下代码：
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
color: hotpink;
}
您可以改用 :is() 并提高易读性，同时避免使用长选择器：
:is(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
易读性和较短的选择器便利性只是 :is() 和 :where() 为 CSS 带来的价值的一部分。在这篇博文中，您将了解这两个功能伪选择器的语法和值。
无限直观了解使用 :is() 前后的效果
浏览器兼容性
:is()
:where()
认识:is()和:where()
这些是功能伪类选择器，请注意末尾的 () 以及它们以 : 开头的方式。您可以将其视为与元素匹配的运行时动态函数调用。编写 CSS 时，您可以通过它们将选择器中间、开头或结尾的元素组合在一起。它们还可以改变特异性，使您能够抵消或提高特异性。
选择器分组
:is() 可用于分组的任何操作，:where() 也一样。这包括在选择器中的任何位置使用它们，以及嵌套和堆叠它们。您熟悉和喜爱的全方位 CSS 灵活性。以下是几个示例：
/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
/* in the middle */
article :is(header,footer) > p {
color: gray;
}
/* at the end */
.dark-theme :where(button,a) {
color: rebeccapurple;
}
/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
color: rebeccapurple;
}
/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
text-transform: uppercase;
}
/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
font-weight: 900;
}
上面的每个选择器示例都展示了这两个函数伪类的灵活性。如需查找可受益于 :is() 或 :where() 的代码区域，请查找包含多个逗号并且重复的选择器。
将简单和复杂的选择器与 :is() 搭配使用
如需复习一下选择器，请参阅“学习 CSS”中的选择器模块。下面通过几个简单和复杂的选择器示例来说明这一功能：
article > :is(p,blockquote) {
color: black;
}
:is(.dark-theme.hero > h1) {
font-weight: bold;
}
article:is(.dark-theme:not(main .hero)) {
font-size: 2rem;
}
到目前为止，:is() 和 :where() 在语法上可以互换。现在我们来看看它们有何不同。
:is() 和 :where() 之间的区别
在特异性方面，:is() 和 :where() 差异很大。如需回顾特异性，请参阅“学习 CSS”中的特异性模块。
简而言之
:where()没有特异性。
:where()会压缩以函数参数形式传递的选择器列表中的所有特异性。这是其种类中的第一个选择器功能。:is()采用其最具体的选择器的特异性。
:is(a,div,#id)的特异性得分为一个 ID，满分为 100 分。
当我对分组感到过于激动时，在列表中采用最高特异性选择器只是一个陷阱。我总是能够将高特异性选择器移至其自己的选择器中，从而避免这么多影响，从而提高易读性。以下是我的意思的示例：
article > :is(header, #nav) {
background: white;
}
/* better as */
article > header,
article > #nav {
background: white;
}
有了 :where()，我就期待看到库提供没有明确的版本。作者样式和库样式之间的特异性竞争可能会结束。在编写 CSS 时，没有具体竞争条件。 CSS 已经在研究这样的分组功能很久了，现在它仍然是有待探索的领域。尽情享受制作更小的样式表和移除逗号的乐趣。
