使用 :where() 告别复杂选择器

:where() 是什么？

可以将 `:where()` 视为 CSS 工具箱中的一个强大工具，它可让您将多个选择器分组为一个简洁的表达式。它特别适用于将样式应用于与任何指定选择器匹配的元素，而不必担心特异性冲突。

**基本语法：**

element:where(selector1, selector2, ...) {
  /* Styles to be applied */
}

**例子：**

假设你想为所有` ` 元素具有类 `highlight` 或类 `important`。你可以像这样使用 `:where()`：

p:where(.highlight, .important) {
  font-weight: bold;
  color: red;
}

提高可读性：使您的 CSS 更简洁、更易于理解。

特异性控制：帮助您更轻松地覆盖样式，因为 :where() 具有零特异性。

增强可维护性：通过分组选择器，您可以使您的 CSS 更加模块化且更易于维护。

**真实世界的例子：**

假设你有一个带有导航栏的网站。你想为活动导航链接设置不同的样式。你可以使用 `:where()` 来定位 `:hover` 和 `:active` 状态：

nav a:where(:hover, :active) {
  background-color: #f0f0f0;
  color: #333;
}

**结论：**

通过理解并有效使用 `:where()`，您可以编写更高效、更易于维护且更优雅的 CSS 代码。它是任何 Web 开发人员的宝贵工具。

虽然 `:where()` 非常适合简单的选择器分组，但与复杂选择器一起使用时它会变得更加强大。

**示例：设置特定表格单元格的样式**

假设您想根据特定表格单元格的内容和位置来设置其样式。您可以使用 `:where()` 来组合多个选择器：

table td:where(
  :nth-child(2),
  :contains("Important")
) {
  background-color: yellow;
  font-weight: bold;
}

此代码将设置每个表格单元格的第二个子单元格的样式，以及任何包含单词“Important”的单元格的样式。

您还可以将 `:where()` 与其他伪类结合起来，以创建更具体的选择器：

a:where(:hover, :focus) {
  text-decoration: underline;
  color: blue;
}

此代码将设置锚链接的 `:hover` 和 `:focus` 状态的样式。

**使用 :where() 的最佳实践**

明智地使用它：不要过度使用 :where()，因为它会使你的 CSS 更复杂，更难阅读和维护。

优先考虑特殊性：虽然 :where() 没有特殊性，但在编写 CSS 时考虑特殊性仍然很重要。

彻底测试：始终在不同的浏览器中测试您的 CSS 以确保兼容性。

**结论：**

`:where()` 伪类是现代 CSS 的宝贵工具。通过掌握它的用法，您可以编写更高效、更易于维护且更优雅的 CSS 代码。