CSS :is 选择器

简介

:is() 是一个功能强大的伪类选择器，它允许开发者将一组选择器组合在一起，从而简化复杂的样式规则。使用 :is() 可以显著减少代码的重复性，提高可维护性和可读性。它接受一个逗号分隔的选择器列表作为参数，并返回匹配这些选择器中的任何一个的元素。

基本语法

:is() 的基本语法如下：

:is(selector-list) {
  /* 属性声明 */
}

selector-list 是一个逗号分隔的选择器列表。例如：

:is(p, span, a) {
  color: blue;
}

上述代码将应用于所有 <p>, <span> 和 <a> 元素。

使用场景

应用于多个不同类型的元素

当你需要为多种类型的元素应用相同的样式时，可以使用 :is() 来避免重复代码。例如：

:is(h1, h2, h3, h4, h5, h6) {
  font-family: 'Arial', sans-serif;
}

这段代码将为所有标题元素设置相同的字体样式。

为动态生成的内容添加样式

当页面上的某些元素是通过 JavaScript 动态生成时，可能无法预先知道这些元素的确切类型。此时，可以使用 :is() 来确保样式能够正确应用到这些元素上。

:is(.dynamic-class > *) {
  background-color: lightgray;
}

这段代码将应用于 .dynamic-class 容器内的所有子元素。

结合其他伪类和属性选择器

:is() 也可以与其他伪类和属性选择器一起使用，以创建更复杂的选择器模式。

:is(input[type="text"], input[type="email"]) {
  padding: 8px;
  border: 1px solid #ccc;
}

上述代码将应用于所有类型为文本或电子邮件的输入框。

注意事项

• :is() 本身不会引入任何新的样式行为；它只是将一组选择器组合在一起。
• 使用 :is() 时要注意性能问题。虽然现代浏览器已经优化了对这种选择器的支持，但在极端情况下（比如大量嵌套的选择器），仍可能会对渲染速度产生影响。
• 在选择器列表中，尽量避免使用过于宽泛的选择器。这不仅可能导致意外的应用效果，还可能降低 CSS 的性能。

示例

假设有一个网站，其中包含多种类型的列表项（如新闻列表、产品列表等）。每个列表项都有一些共同的样式需求，但也有各自独特的样式。我们可以使用 :is() 来处理共同的部分，而针对独特部分单独定义样式。

HTML 结构可能如下所示：

// www.javascriptcn.com code example
<ul class="news-list">
  <li class="item">新闻条目</li>
  <li class="item">新闻条目</li>
</ul>

<ul class="product-list">
  <li class="item">产品条目</li>
  <li class="item">产品条目</li>
</ul>

对应的 CSS 可能如下：

// www.javascriptcn.com code example
:is(.news-list .item, .product-list .item) {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.news-list .item {
  color: blue;
}

.product-list .item {
  color: green;
}

这样，我们就可以同时为新闻和产品列表项设置通用的样式，同时又能分别控制它们各自的样式。