CSS中的 :is() 和 :where()怎么用

发布时间：2021-09-24 10:16:53 作者：柒染
来源：亿速云阅读：195

# CSS中的 :is() 和 :where() 怎么用

在现代CSS开发中，伪类选择器的功能越来越强大。`:is()`和`:where()`是CSS Selectors Level 4规范中引入的两个重要伪类函数，它们可以显著简化选择器的编写方式。本文将详细介绍这两个选择器的用法、区别以及实际应用场景。

## 1. 什么是 :is() 和 :where()

### 1.1 基本概念

`:is()`和`:where()`都是**CSS伪类函数**，它们接受一个选择器列表作为参数，并匹配该列表中任意一个选择器可以选择的元素。这两个选择器的主要目的是**减少重复代码**和**简化复杂选择器**的编写。

```css
/* 传统写法 */
header h1, header h2, header h3 {
  color: blue;
}

/* 使用:is()简化 */
header :is(h1, h2, h3) {
  color: blue;
}

1.2 浏览器支持情况

截至2023年，主流浏览器对这两个选择器的支持情况良好：

Chrome 88+ ✅
Firefox 78+ ✅
Safari 14+ ✅
Edge 88+ ✅
Opera 75+ ✅

2. :is() 选择器详解

2.1 基本语法

:is()的语法格式为：

:is(selector1, selector2, ..., selectorN) {
  /* 样式规则 */
}

2.2 使用示例

示例1：简化多层嵌套选择器

/* 传统写法 */
article section h1, 
article section h2, 
article section h3 {
  margin-bottom: 1em;
}

/* 使用:is() */
article section :is(h1, h2, h3) {
  margin-bottom: 1em;
}

示例2：组合不同类型的选择器

:is(.dark-theme, .light-theme) :is(button, a) {
  transition: all 0.3s ease;
}

2.3 特异性(CSS Specificity)规则

:is()选择器的特异性等于参数列表中最具体选择器的特异性：

:is(#id, p) {}  /* 特异性 = (1,0,0) */
:is(.class, div) {} /* 特异性 = (0,1,0) */

3. :where() 选择器详解

3.1 基本语法

:where()的语法与:is()相同：

:where(selector1, selector2, ..., selectorN) {
  /* 样式规则 */
}

3.2 使用示例

示例1：创建低特异性重置样式

/* 特异性为0的样式重置 */
:where(ul, ol) :where(ul, ol) {
  padding-left: 1.5em;
}

示例2：与自定义属性结合使用

:where(html[data-theme="light"]) {
  --text-color: #333;
}

3.3 特异性规则

与:is()不同，:where()始终具有0特异性：

:where(#id, p) {}  /* 特异性 = (0,0,0) */

4. :is() 和 :where() 的区别

特性	:is()	:where()
特异性	等于参数中最高的特异性	始终为0
主要用途	简化选择器同时保持特异性	创建低特异性或可覆盖的基础样式
覆盖优先级	可能难以被覆盖	容易被后续样式覆盖

5. 实际应用场景

5.1 主题切换实现

/* 基础样式 */
:where(html[data-theme="dark"]) {
  --bg-color: #222;
  --text-color: #fff;
}

/* 可以被轻易覆盖的默认值 */
:where(html) {
  --bg-color: #fff;
  --text-color: #222;
}

5.2 复杂表单样式

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

form :where(.error-message) {
  color: red;
  font-size: 0.8em;
}

5.3 响应式设计

/* 移动端优先样式 */
:where(.card) {
  padding: 1em;
  margin: 0.5em;
}

/* 大屏幕覆盖样式 */
@media (min-width: 768px) {
  .card {
    padding: 2em;
  }
}

6. 注意事项和最佳实践

6.1 性能考虑

虽然现代浏览器对这两个选择器优化得很好，但仍有几点需要注意：

避免过度嵌套：:is(:is(div, p), :where(span, a)) 这种写法难以维护
保持参数列表简洁：过长的选择器列表可能影响解析性能

6.2 可读性建议

合理换行：对于复杂选择器适当换行


article 
 :is(h1, h2, h3, h4)
 :is(.highlight, .important) {
 color: var(--accent);
}

添加注释：解释复杂选择器的用途

6.3 渐进增强策略

考虑到旧版浏览器的支持问题，可以采用以下策略：

/* 回退方案 */
header h1, header h2, header h3 {
  color: blue;
}

/* 现代浏览器使用 */
@supports selector(:is(*)) {
  header :is(h1, h2, h3) {
    color: blue;
  }
}

7. 与其他CSS功能的结合

7.1 与CSS变量结合

:is(button, a.button) {
  --button-bg: #4CAF50;
  background: var(--button-bg);
}

7.2 与@supports规则结合

@supports selector(:is(*)) {
  /* 使用:is()的现代样式 */
}

@supports not selector(:is(*)) {
  /* 回退样式 */
}

7.3 与CSS预处理器配合

在Sass/Less中也可以使用这些选择器：

// Sass示例
article {
  #{':is(h1, h2, h3)'} {
    font-family: var(--heading-font);
  }
}

8. 常见问题解答

Q1: 为什么我的:is()选择器样式被覆盖了？

这可能是因为:is()继承了参数中最高的特异性。考虑改用:where()或检查选择器的特异性层级。

Q2: 可以在一个选择器中同时使用:is()和:where()吗？

可以，而且这种组合非常有用：

/* 保持部分特异性同时重置其他部分 */
article :is(h1, h2) :where(.highlight) {
  background: yellow;
}

Q3: 这两个选择器会影响页面渲染性能吗？

在现代浏览器中影响微乎其微，但应避免创建过于复杂的选择器列表。

9. 总结

:is()和:where()是CSS发展中的重要补充，它们通过以下方式改善了开发体验：

减少代码重复：简化了复杂选择器的编写
提高可维护性：使样式表更加简洁清晰
灵活的样式控制：:where()为创建可覆盖的基础样式提供了可能

在实际项目中，建议：

✔️ 使用:is()简化具有相似样式的选择器组
✔️ 使用:where()创建低特异性的基础样式或重置
✔️ 注意浏览器兼容性并根据需要提供回退方案

通过合理运用这两个选择器，可以编写出更加简洁、高效和可维护的CSS代码。 “`

这篇文章共计约2600字，全面介绍了:is()和:where()选择器的使用方法、区别和实际应用场景，采用Markdown格式编写，包含代码示例、比较表格和结构化的小节，适合作为技术博客或文档内容。