CSS中的:is()和:where()伪类选择器详解

我将为你详细讲解CSS中功能强大但常被忽视的:is()和:where()伪类选择器，这两个选择器可以显著简化复杂的CSS选择器编写。

一、基本概念与作用

1. 问题背景
在编写CSS时，我们经常需要为多个选择器应用相同的样式。传统的做法会产生冗长的代码：

/* 传统写法 - 冗余且难维护 */
header h1,
header h2,
header h3,
main h1,
main h2,
main h3,
footer h1,
footer h2,
footer h3 {
  color: #333;
  font-weight: 700;
}

3. 解决方案
:is()和:where()是CSS选择器第4级规范中引入的功能性伪类，它们可以将多个选择器列表作为参数，简化选择器编写。

二、:is()伪类选择器详解

1. 基本语法

/* 简化后的写法 */
:is(header, main, footer) :is(h1, h2, h3) {
  color: #333;
  font-weight: 700;
}

2. 工作原理
:is()接受一个选择器列表作为参数，匹配列表中任一选择器可匹配的元素。浏览器在解析时会将其展开为对应的选择器组合。

3. 优先级（特异性）计算规则
这是:is()最重要的特性之一：

• :is()的优先级等于参数列表中最高优先级的选择器
• 无论实际匹配的是哪个选择器，都使用这个最高优先级

/* 示例1 */
#header h1 { /* 优先级: ID(1) + 元素(1) = 101 */
  color: red;
}

/* 示例2 */
:is(#header, .container) h1 { 
  /* 优先级: 取#header(100) + h1(1) = 101 */
  color: blue; /* 这个会覆盖上面的红色 */
}

/* 等效于 */
#header h1,
.container h1 {
  color: blue;
}

4. 复杂嵌套示例

/* 多层嵌套使用 */
article :is(h1, h2) :is(code, kbd) {
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
}

/* 等效于 */
article h1 code,
article h1 kbd,
article h2 code,
article h2 kbd {
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
}

三、:where()伪类选择器详解

1. 基本语法

:where(header, main, footer) :where(h1, h2, h3) {
  color: #333;
  font-weight: 700;
}

2. 与:is()的关键区别
:where()的优先级特殊性为0
这是:where()与:is()最根本的区别：

• :where()总是具有0优先级
• 无论参数列表中的选择器优先级多高，:where()本身不增加优先级

/* 示例 */
#header h1 { /* 优先级: 101 */
  color: red;
}

:where(#header, .container) h1 { 
  /* 优先级: 0 + h1(1) = 1 */
  color: blue; /* 这个不会覆盖红色，因为优先级较低 */
}

四、核心差异对比

1. 优先级差异

/* 优先级对比示例 */
div :is(#id, .class) p { /* 优先级: 100 + 1 + 1 = 102 */
  color: red;
}

div :where(#id, .class) p { /* 优先级: 0 + 1 + 1 = 2 */
  color: blue;
}

/* 实际应用中 */
:is(.nav, #menu) a { /* 优先级取决于#menu */
  color: blue;
}

:where(.nav, #menu) a { /* 优先级始终很低 */
  color: red;
}

2. 使用场景差异

适用:is()的场景：

• 需要保持或提高选择器优先级时
• 覆盖现有样式时
• 需要明确控制样式优先级时

适用:where()的场景：

• 创建低优先级的重置样式
• 编写可轻松覆盖的基础样式
• 框架或组件库开发
• 避免优先级战争

五、实际应用示例

1. 简化表单样式

/* 传统写法 */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
}

/* 使用:is()简化 */
form :is(input[type="text"], 
         input[type="email"], 
         input[type="password"], 
         textarea) {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
}

2. 响应式设计中的应用

/* 针对不同设备设置不同的字体大小 */
:is(html, body) {
  font-size: 16px;
}

@media (max-width: 768px) {
  :is(html, body) {
    font-size: 14px;
  }
}

3. 创建可复用的工具类

/* 低优先级的工具类，便于覆盖 */
:where(.text-primary) { /* 优先级: 0 */
  color: #007bff;
}

:where(.bg-light) { /* 优先级: 0 */
  background-color: #f8f9fa;
}

/* 在组件中轻松覆盖 */
.card .text-primary { /* 优先级: 10 */
  color: #0056b3;
}

六、注意事项和最佳实践

1. 参数验证

• 如果:is()或:where()的参数列表包含无效选择器，整个选择器都会失效
• 但不会影响其他选择器

/* 如果:is()参数无效，整个规则被忽略 */
:is(header, :invalid-pseudo) h1 { /* 整个规则被忽略 */
  color: red;
}

/* 但不会影响其他规则 */
header h1 { /* 这个规则仍然有效 */
  color: blue;
}

2. 性能考虑

• 现代浏览器对这两个选择器有很好的优化
• 但过度复杂的嵌套可能影响性能
• 建议保持选择器简洁

3. 兼容性策略

/* 渐进增强的写法 */
/* 现代浏览器使用:is() */
:is(header, nav, footer) a {
  color: #0066cc;
}

/* 传统浏览器备用方案 */
header a,
nav a,
footer a {
  color: #0066cc;
}

4. 避免的常见错误

/* 错误：多余的:is()包装 */
:is(div) { /* 不需要用:is()包装单个选择器 */
  color: red;
}

/* 错误：不必要地增加复杂性 */
:is(.container) :is(.item) { /* 过于复杂 */
  padding: 10px;
}

/* 正确：直接使用 */
.container .item {
  padding: 10px;
}

七、实际开发建议

1. 优先使用:where()：在基础样式和重置样式中使用:where()，保持低优先级
2. 谨慎使用:is()：在需要特定优先级控制时使用:is()
3. 保持可读性：避免过度嵌套，确保代码可维护
4. 考虑兼容性：如果需要支持旧浏览器，提供回退方案
5. 性能测试：在大型项目中使用时，测试选择器性能影响

这两个伪类选择器是CSS现代化的强大工具，正确使用可以显著提高CSS代码的可读性、可维护性和性能。