新的 CSS 伪类函数 :is() 和 :where()

发表于 更新于 分类于

在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。

例如，如果您想对标题中的 <b> 标签进行颜色调整，我们应该都写过这样的代码：

1
2
3
4
5
6
7
8
h1 > b,
h2 > b,
h3 > b,
h4 > b,
h5 > b,
h6 > b {
  color: hotpink;
}

现在，我们可以使用 :is() 缩减代码并提高其可读性：

1
2
3
:is(h1, h2, h3, h4, h5, h6) > b {
  color: hotpink;
}

浏览器兼容性

:is() 由 :match() 改名而来，部分浏览器有其私有的 :any() 实现 :is() 的部分功能，在使用 :is() 之前，我们应该先了解其兼容性：

浏览器兼容性

:is() 和 :where()

:is() 作为一个伪类函数，其接收选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素
:where() 伪类函数与其功能相同，仅仅选择器权重不同，下面是几个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 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;
}