:is()
:is() CSS 伪类函数将一个选择器列表作为其参数，并选择可以由该列表中的任一选择器选中的任何元素。这对于以更紧凑的形式编写大型选择器非常有用。
注意： 此选择器最初命名为 :matches()（和 :any()），在 CSSWG issue #3258 中被重命名为 :is()。
试一试
ol {
list-style-type: upper-alpha;
color: darkblue;
}
:is(ol, ul, menu:unsupported) :is(ol, ul) {
color: green;
}
:is(ol, ul) :is(ol, ul) ol {
list-style-type: lower-greek;
color: chocolate;
}
<ol>
<li>Saturn</li>
<li>
<ul>
<li>Mimas</li>
<li>Enceladus</li>
<li>
<ol>
<li>Voyager</li>
<li>Cassini</li>
</ol>
</li>
<li>Tethys</li>
</ul>
</li>
<li>Uranus</li>
<li>
<ol>
<li>Titania</li>
<li>Oberon</li>
</ol>
</li>
</ol>
语法
:is(<forgiving-selector-list>) {
/* ... */
}
参数
:is() 伪类需要一个选择器列表，一个由逗号分隔的一个或多个选择器作为其参数。该列表不能包含伪元素，但允许任何其他简单选择器、复合选择器和复杂选择器。
:is() 和 :where() 之间的区别
两者的区别在于，:is() 会计入整个选择器的特异性（它采用其最具体参数的特异性），而 :where() 的特异性值为 0。这在:where() 参考页面上的示例中有所演示。
容错选择器解析
规范将 :is() 和 :where() 定义为接受容错选择器列表。
在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表都被视为无效。当使用 :is() 或 :where() 时，如果其中一个选择器无法解析，则不会将整个选择器列表视为无效，而是会忽略不正确或不支持的选择器，并使用其他选择器。
:is(:valid, :unsupported) {
/* … */
}
即使在不支持 :unsupported 的浏览器中，它仍然可以正确解析并匹配 :valid，而
:valid,
:unsupported {
/* … */
}
即使支持 :valid，在不支持 :unsupported 的浏览器中也会被忽略。
示例
简化列表选择器
:is() 伪类可以大大简化你的 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;
}
你可以将其替换为
/* 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 元素可能会非常复杂
/* 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() 会容易得多
/* 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() 伪类不匹配伪元素。所以，不要这样写
some-element:is(::before, ::after) {
display: block;
}
或者这样写
:is(some-element::before, some-element::after) {
display: block;
}
而是这样写
some-element::before,
some-element::after {
display: block;
}
规范
| 规范 |
|---|
| 选择器 Level 4 # 匹配伪元素 |
浏览器兼容性
加载中…