原文： CSS Pseudo-Classes – How the :is Pseudo-Class Works with Examples

伪类允许你在一个特定的状态下对一个元素进行样式设计。在 CSS 中，有许多支持状态的类。在这篇文章中，我将解释 :is 伪类是如何工作的。

这篇文章是我在未来几周和几个月内要做的一个新系列的第一篇文章：详解 CSS 伪类。我打算尽可能地解释更多的伪类，每篇独立的文章都会涉及到一个特定的伪类。

我有一个介绍 CSS 伪类的 YouTube 播放列表，你也可以去看看。

注意：伪类与伪元素不同。伪类适用于元素的不同状态，而伪元素适用于一个元素的不同部分。

你可以在这里了解到更多的区别。

在本教程中，你将学习 :is 伪类的所有基础知识。

:is 伪类是如何工作的

:is 伪类接受一个选择器参数的列表，并匹配所有适用于该列表中任何选择器的元素。以下是语法：

:is(selector1, selector2, selector3) {
  /* 样式 */
}

你可以指定任何类型的选择器，DOM 中任何与选择器相匹配的元素都会被选中并进行样式处理。

我有一篇关于 CSS 中的选择器类型的文章，你可以查看一下你可以在 :is 伪类中使用的不同选择器。

你唯一不能与该类一起使用的选择器类型是伪元素。

另外，因为我喜欢我的文章有视频版本（对于那些可能喜欢/喜欢看视频的人），你可以在 YouTube 上查看 :is 伪类的视频版本。

让我们看看这个伪类的一些例子。

:is 伪类的例子

看看这个 CSS 代码：

:is(.selector1, #selector2, selector3, :selector4, [selector5]) {
  /* 样式 */
}

作为参数列表，我们有 selector1 class、selector2 id、selector3 tag、selector4 pseudo-class 和 selector5 attribute 选择器。DOM 中的所有元素，只要与这些选择器中的至少一个相匹配，就会被选中进行样式设计。

让我们看看一个实际的例子：

<section>
  <p>Paragraph of section</p>
</section>

<div>
  <p>Paragraph of div</p>
</div>

<article>
  <p>Paragraph of article</p>
</article>

<span>
  <p>Paragraph of span</p>
</span>

这里，我们有一个 section、div、article 和一个 span 元素。这些元素中的每一个都有一个 p 子元素。如果我们想给这些元素的所有 p 子元素设置样式，我们可以有以下的样式声明：

section p,
div p,
article p,
span p {
  text-decoration: underline;
  color: red;
}

结果：

image-107

但我们可以用 :is 伪类来改进 CSS，方法如下：

:is(section, div, article, span) p {
  text-decoration: underline;
  color: red;
}

这让我们得到了与上面相同的结果。但有什么不同呢？

在 :is 伪类中，我们传递了四个选择器：标签名称 selection、div、article 和 span。使用后代选择器（一个空格字符），我们选择作为列表中任何一个选择器的后代的 p 标签元素。这意味着，这个选择将选择：

  • section 的 p 子元素
  • div 的 p 子元素
  • article 的 p 子元素
  • span 的 p 子元素

使用 :is 伪类，我们缩短了元素选择器。

让我们看看另一个例子。

<button>Click Me</button>
<!-- <button class="active">Click Me</button> -->

对于这个按钮，假设你想在它处于 hover 或 focus 状态时，或在它有一个 active 类时，应用同样的样式。通常情况下，你可以有以下代码：

button:hover,
button:focus,
button.active {
  background-color: black;
  color: white;
}

结果是：

image-108

你也可以用 :is 伪类来改进这一点：

button:is(:hover, :focus, .active) {
  background-color: black;
  color: white;
}

在这里，你看到我们在按钮上添加了 :is 伪类，而对于选择器，我们有：

  • :hover 伪类
  • :focus 伪类
  • .active 类

这将相应地匹配按钮。

:is 不支持伪元素

正如我前面提到的，你可以将不同类型的选择器作为参数传递给 :is 伪类，但伪元素除外。

例如：

:is(::after, ::selection) {
  /* 样式 */
}

在这里，我们把 ::after 和 ::selection 伪元素作为参数传递给 :is 伪类。这样的样式声明是行不通的。

什么是容错选择器列表

当你在 CSS 中把多个选择器组合在一起，而其中一个选择器不被支持（或无效），你的样式声明将被忽略，举个例子：

.button, #box, invalid {
  /* 样式 */
}

对于我们上面的样式，我们有 .button class、#box id 和 invalid tag 选择器。第一个和第二个选择器是有效的，但没有像 invalid 这样的标签名称。因为第三个不被支持，整个样式将被忽略。

但是 :is 伪类允许有一个容错选择器列表（forgiving selector list）的概念。这意味着，如果作为参数传递的选择器之一不被支持，那将被“宽恕”。也就是说，支持的选择器将被应用，目标元素也会相应地被设置样式，例如：

button:is(:hover, :focuss, .active) {
  background-color: black;
  color: white;
}

在这里，我们为我们的样式传递 :hover pseudo-class、:focuss pseudo-class 和 .active class。:focuss 伪类不被支持，但不是整个样式声明被忽略，:hover 和 .active 选择器仍将被应用。

总结

你可以用 :is 伪类做很多高级选择。这个类允许你用更短、更容易阅读的方式来写长的选择器。

在这篇文章中，我们已经了解了 :is 伪类。通过例子，我们看到了它是如何工作的，以及它是如何使 CSS 代码变得更好的。

请记住，这个伪类的工作原理与 :where 伪类类似，但有一个主要区别。我将在以后的文章中解释 :is 和 :where 伪类的区别。

如果你喜欢这篇文章，请将它分享给更多人。😇