详解 CSS 中 :is 和 :where 的区别

:is 和 :where 作为 CSS 中的伪类选择器，主要用于简化复杂的选择器编写，并提高代码的可读性。它们的功能相似，但在特异性计算上存在重要差异。

区别

1. :is 的特异性

   • :is 选择器中的每个参数都会参与特异性计算，选中的最“强”的选择器将被用于计算特异性。
   • 如果 :is 内的选择器为空或无效，则整个规则失效。

2. :where 的特异性

   • :where 始终具有 零特异性，即使它的参数包含高特异性的选择器。
   • 它主要用于设定默认样式，而不会干扰后续的样式覆盖。

示例与分析

1. 基本用法

:is(h1, h2, h3) {
  color: blue;
}

:where(h1, h2, h3) {
  margin: 0;
}

• :is(h1, h2, h3) 将为 <h1>、<h2> 和 <h3> 设置 color: blue，其特异性根据 h1、h2 或 h3 的权重计算。
• :where(h1, h2, h3) 将为这些元素设置 margin: 0，但特异性为零，因此更容易被覆盖。

2. 结合具体选择器

/* :is 示例 */
article :is(h1, h2, h3) {
  color: green;
}

/* :where 示例 */
article :where(h1, h2, h3) {
  font-size: 1.5rem;
}

对于以下 HTML：

<article>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
</article>

• :is 的特异性为 article + h1/h2/h3，与常规组合选择器一样。
• :where 的特异性始终为 0，适合用于默认样式。

3. 优先级冲突

/* 高特异性 */
article :is(h1, h2, h3) {
  color: red;
}

/* 低特异性 */
:where(h1, h2, h3) {
  color: blue;
}

对于以下 HTML：

<article>
  <h1>Heading 1</h1>
</article>

• 最终颜色为红色，因为 :is 的特异性比 :where 高。

4. 与类选择器配合

/* :is 示例 */
:is(.btn-primary, .btn-secondary) {
  padding: 10px;
}

/* :where 示例 */
:where(.btn-primary, .btn-secondary) {
  border: 1px solid #ccc;
}

• .btn-primary 和 .btn-secondary 的 padding 的规则会根据 .btn-primary 和 .btn-secondary 的特异性计算。
• border 的规则则始终具有零特异性，容易被覆盖。

5. 嵌套选择器

/* :is 示例 */
:is(section, article) h1 {
  color: orange;
}

/* :where 示例 */
:where(section, article) h1 {
  margin-bottom: 0;
}

• :is(section, article) h1 的特异性包括 section/article 和 h1，适合用于高优先级样式。
• :where(section, article) h1 特异性为 h1 的特异性（即直接的元素选择器特异性），用于默认设置。

特异性计算总结

单独使用

• :is(.class, h1) 的特异性 = .class 的特异性（高于元素选择器）。
• :where(.class, h1) 的特异性始终为 0。

嵌套组合

• div :is(.class, h1) = div + .class 或 div + h1 的特异性。
• div :where(.class, h1) = div 的特异性（而不是 .class）。

何时使用

1. 使用 :is：

   • 需要应用样式，同时利用更高的特异性。
   • 简化重复的复杂选择器。

2. 使用 :where：

   • 设定默认样式，确保不会干扰更高优先级的覆盖规则。
   • 提高代码的可维护性和灵活性。

:is 的使用场景

1. 简化复杂选择器

当你需要为多个选择器定义相同的样式时，:is 可以简化代码，减少重复。

示例：

/* 对多个标题定义相同样式 */
:is(h1, h2, h3) {
  font-weight: bold;
  color: darkblue;
}

• 用途：多个元素的样式统一，减少重复代码。

2. 需要高特异性规则时

当你需要确保某些规则有足够高的特异性以覆盖其他样式时，可以使用 :is。

示例：

/* 具有高特异性的组合选择器 */
section :is(.highlight, h1) {
  background-color: yellow;
}

• 用途：确保 .highlight 或 h1 的背景色无法轻易被其他样式覆盖。

3. 与伪类/伪元素配合

可以结合伪类或伪元素使用 :is，用于统一样式设置。

示例：

/* 统一设置 hover 或 focus 的样式 */
:is(button, a):hover {
  text-decoration: underline;
}

• 用途：减少重复选择器书写，尤其是伪类规则多时。

4. 使用动态生成的类名

在需要处理复杂的动态类名或条件样式时，:is 可以动态适配，保持代码整洁。

示例：

:is(.btn-primary, .btn-secondary, .btn-danger) {
  padding: 1rem;
  border-radius: 5px;
}

• 用途：在框架（如 React、Vue）中，动态管理多个样式规则。

:where 的使用场景

1. 设定默认样式

:where 是零特异性的，适合用于定义默认样式，而不会干扰更高特异性规则的覆盖。

示例：

/* 为文章标题设定默认样式 */
:where(h1, h2, h3) {
  margin: 0;
  font-family: sans-serif;
}

• 用途：为元素提供初始样式，允许后续样式轻松覆盖。

2. 定义组件的通用规则

在组件库中，可以使用 :where 定义一些通用的、低优先级的样式，确保组件的主题样式不会被意外干扰。

示例：

:where(.card, .button) {
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

• 用途：提供组件的基础样式。

3. 提升样式规则的灵活性

:where 的零特异性使其非常适合用于框架或工具类样式，避免冲突。

示例：

/* 表单元素的默认样式 */
form :where(input, textarea, select) {
  margin: 8px 0;
  font-size: 1rem;
}

• 用途：确保用户定义的样式规则可以覆盖这些默认样式。

4. 与复杂选择器配合

在复杂规则中，:where 可以避免特异性问题，适合用于灵活的样式规则定义。

示例：

/* 对嵌套结构的默认设置 */
:where(section, article) :where(h1, h2, h3) {
  font-size: 1.2rem;
}

• 用途：在嵌套结构中，提供默认的排版规则。

对比应用场景总结

实战中的建议

• 组件库开发：优先使用 :where 定义基础样式，确保可扩展性。
• 项目样式控制：使用 :is 管理高特异性样式，如重要模块或状态样式。
• 默认设置：用 :where 定义全局默认规则，让后续的样式覆盖更容易。

两者结合使用，能够显著提高 CSS 的灵活性和可维护性！