CSS 伪类选择器 :is()

备注

最初该选择器被命名为:matches()（以及:any()），但在 CSSWG issue #3258 中被重命名为:is()。

伪元素在:is()的选择器列表中无效。

:is() 和 :where() 的区别

:is()会计入整个选择器的优先级（它采用其最具体参数的优先级），而:where()的优先级为0。

可容错选择器解析

规范将:is()和:where()定义为接受容错选择器列表。

在CSS中，当使用选择器列表时，如果任何一个选择器无效，则整个列表将被视为无效。

使用:is()或:where()时，如果一个选择器无法解析，整个选择器列表不会被视为无效，而是会忽略不正确或不支持的选择器，并使用其他的选择器。

语法

:is(选择器列表) {
  /* ... */
}

示例

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

等价于

/* 三层或更深的无序列表使用方形符号。 */
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

参考文档

https://developer.mozilla.org/en-US/docs/Web/CSS/:is