1. 首页
  2. CSS 菜鸟教程
  3. CSS - 伪类 :is()

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（） 与 :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>
<< CSS - 伪类 :invalid CSS - 伪类 :lang() >>