CSS - 伪类 :is()

CSS 伪类函数:is()接受参数作为选择器列表，从而目标任何可以被列表中任何选择器选中的元素。

伪类:is()

简化了需要编写的大量选择器，使其更简洁。
简化了节选择器，即在处理不同级别的 HTML 节和标题时，例如<section>，<article>，<aside>和<nav>。

不选择伪元素。参考下面的语法，这些是不允许的

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

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

此伪类最初称为:matches（和:any()）。

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

:is() vs :where()

:is()负责计算列表中所有选择器的更具体的数量，而:where()的特异性值为0。

宽容的选择器解析

使用:is()和:where()时，如果其中一个选择器无法解析，则不会将整个选择器列表视为无效，而是只忽略不正确或不支持的选择器，并使用其余的选择器。
:is(:valid, :unsupported) - 这将正确解析并匹配:valid，即使浏览器不支持:unsupported。

语法

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

CSS :is() 示例

下面的例子演示了:is()函数伪类的用法。在这里，:is()函数伪类应用于h1、h2、h3和a元素。因此，无论在何处找到这些元素，都会应用相应的样式。

<html>
<head>
<style>
   body {
      font: 300 90%/1.4 system-ui;
      margin: 1rem;
   }
   main :is(h1, h2, h3) {
      color: green;
   }
   main :is(a) {
      color: red;
      font-size: large;
   }
</style>
</head>
<body>
   <main>
      <h1>:is() pseudo-class example</h1>
      <h3>Li Europan lingues</h3>
      <a href="">es membres del sam familie</a>. <p>Lor separat existentie es un myth.</p>
      <h2>Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</h2>
      <p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
      <p>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
      <h3>Ma quande lingues coalesce</h3>
      <p>li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
      <p>It va esser tam simplic quam <a href="">Occidental</a> in fact, it va esser Occidental.</p>
   </main>
</body>
</html>

打印页面