跳到主要内容

CSS :is 伪类

介绍​

在编写 CSS 时，我们经常需要为多个选择器应用相同的样式。传统的方式是重复编写相同的样式规则，这不仅增加了代码量，还降低了代码的可读性和可维护性。CSS 的 :is 伪类（也称为 :matches 或 :any）可以帮助我们简化这些重复的选择器，使代码更加简洁。

:is 伪类允许你将多个选择器组合在一起，并为它们应用相同的样式。它的语法非常直观，只需将选择器列表放在 :is() 中即可。

语法​

:is 伪类的基本语法如下：

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

在这个例子中，selector1、selector2 和 selector3 都会被应用相同的样式。

代码示例​

假设我们有以下 HTML 结构：

html
<article>
  <h1>标题</h1>
  <p>段落内容</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
</article>

我们想要为 h1、p 和 li 元素应用相同的字体颜色。传统的方式可能是这样：

css
h1, p, li {
  color: #333;
}

使用 :is 伪类，我们可以将代码简化为：

css
:is(h1, p, li) {
  color: #333;
}

这两种方式的效果是相同的，但使用 :is 伪类可以使代码更加简洁。

实际应用场景​

1. 简化嵌套选择器​

在复杂的 CSS 中，嵌套选择器可能会导致代码冗长且难以维护。 :is 伪类可以帮助我们简化这些嵌套选择器。

例如，假设我们有以下 HTML 结构：

html
<div class="container">
  <div class="header">
    <h1>标题</h1>
  </div>
  <div class="content">
    <p>段落内容</p>
  </div>
</div>

我们想要为 .header h1 和 .content p 应用相同的样式。传统的方式可能是这样：

css
.container .header h1,
.container .content p {
  font-size: 1.5rem;
}

使用 :is 伪类，我们可以将代码简化为：

css
.container :is(.header h1, .content p) {
  font-size: 1.5rem;
}

2. 提高代码的可读性​

:is 伪类不仅简化了代码，还提高了代码的可读性。通过将相关的选择器组合在一起，我们可以更清晰地表达样式的意图。

例如，假设我们有以下 HTML 结构：

html
<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

我们想要为 nav ul li a 和 nav ul li a:hover 应用相同的样式。传统的方式可能是这样：

css
nav ul li a,
nav ul li a:hover {
  color: #007bff;
  text-decoration: none;
}

使用 :is 伪类，我们可以将代码简化为：

css
nav ul li :is(a, a:hover) {
  color: #007bff;
  text-decoration: none;
}

注意事项​

警告

:is 伪类的优先级与选择器列表中最高的优先级相同。这意味着如果 :is() 中的某个选择器具有较高的优先级，整个 :is() 的优先级也会相应提高。

例如：

css
:is(#id, .class) {
  color: red;
}

在这个例子中，#id 的优先级高于 .class，因此整个 :is() 的优先级将与 #id 相同。

总结​

:is 伪类是 CSS 中一个非常强大的工具，它可以帮助我们简化选择器，提高代码的可读性和可维护性。通过将多个选择器组合在一起，我们可以减少重复代码，并使样式表更加简洁。

在实际开发中， :is 伪类特别适用于简化嵌套选择器和提高代码的可读性。然而，需要注意的是，它的优先级规则可能会影响样式的应用顺序，因此在复杂的选择器中要谨慎使用。

附加资源​

练习​

  1. 使用 :is 伪类为以下 HTML 结构中的 h1、h2 和 h3 元素应用相同的字体颜色：
html
<div class="content">
  <h1>标题 1</h1>
  <h2>标题 2</h2>
  <h3>标题 3</h3>
</div>
  1. 使用 :is 伪类简化以下 CSS 代码：
css
.navbar .menu li a,
.navbar .menu li a:hover,
.navbar .menu li a:active {
  color: #fff;
  text-decoration: none;
}

通过完成这些练习，你将更好地掌握 :is 伪类的使用技巧。