:is()

基线 广泛可用

此功能已完善，并在许多设备和浏览器版本上运行。它自 2021 年 1 月.

:is() CSS 伪类 函数以选择器列表作为参数，并选择任何可以通过该列表中的一个或多个选择器选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。

注意：最初命名为 :matches()（以及 :any()），此选择器在 CSSWG 问题 #3258 中重命名为 :is()。

尝试一下

语法

:is() 伪类需要一个 选择器列表，即以逗号分隔的一个或多个选择器作为其参数。列表中不能包含 伪元素，但允许任何其他简单、复合和复杂选择器。

css
:is(<forgiving-selector-list>) {
  /* ... */
}

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

两者之间的区别在于 :is() 会计入整个选择器的特异性（它采用其最具体参数的特异性），而 :where() 的特异性值为 0。这由 :where() 参考页面上的示例 所示。

宽容的选择器解析

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

在 CSS 中，当使用选择器列表时，如果任何选择器无效，则整个列表都被视为无效。当使用 :is() 或 :where() 时，如果一个选择器无法解析，则不会将整个选择器列表视为无效，而是会忽略错误或不支持的选择器，并使用其他选择器。

css
:is(:valid, :unsupported) {
  /* … */
}

即使在不支持 :unsupported 的浏览器中，仍然会正确解析并匹配 :valid，而

css
:valid,
:unsupported {
  /* … */
}

如果浏览器不支持 :unsupported，即使它们支持 :valid，也会被忽略。

示例

简化列表选择器

:is() 伪类可以极大地简化您的 CSS 选择器。例如，考虑以下 CSS

css
/* 3-deep (or more) unordered lists use a 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;
}

您可以将其替换为

css
/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

简化节选择器

:is() 伪类在处理 HTML 节和标题 时特别有用。由于 <section>、<article>、<aside> 和 <nav> 通常嵌套在一起，如果没有 :is()，对它们进行样式设置以相互匹配可能会很困难。

例如，如果没有 :is()，对不同深度的所有 h1 元素进行样式设置可能非常复杂

css
/* Level 0 */
h1 {
  font-size: 30px;
}

/* Level 1 */
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/* Level 2 */
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/* Level 3 */
/* don't even think about it! */

但是，使用 :is()，它要容易得多

css
/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:is(section, article, aside, nav)
  :is(section, article, aside, nav)
  :is(section, article, aside, nav)
  h1 {
  font-size: 15px;
}

:is() 不会选择伪元素

:is() 伪类不会匹配伪元素。因此，与其这样

css
some-element:is(::before, ::after) {
  display: block;
}

或这样

css
:is(some-element::before, some-element::after) {
  display: block;
}

相反，请执行以下操作

css
some-element::before,
some-element::after {
  display: block;
}

规范

规范
选择器级别 4
# matches-伪类

浏览器兼容性

BCD 表格仅在浏览器中加载

参见