CSS - 伪类

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() 与 :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() 伪类函数示例</h1>
      <h3>君不见，黄河之水天上来，奔流到海不复回。</h3>
      <a href="">君不见，高堂明镜悲白发，</a>. <p>朝如青丝暮成雪。</p>
      <h2>人生得意须尽欢，莫使金樽空对月。</h2>
      <p>天生我材必有用，千金散尽还复来。</p>
      <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
      <h3>岑夫子，丹丘生，将进酒，杯莫停。</h3>
      <p>与君歌一曲，请君为我倾耳听。</p>
      <p>钟鼓馔玉不足贵，但愿长醉不愿醒。 <a href="">test</a> 古来圣贤皆寂寞，惟有饮者留其名。</p>
   </main>
</body>
</html>