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

本篇文章给大家分享《使用 :where() 告别复杂的选择器》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

什么是 :where()？

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

基本语法：

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

示例：
假设您想要为所有具有类突出显示或类重要的 <p> 元素设置样式。您可以像这样使用 :where() ：

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

为什么使用:where()？

1. 提高可读性：
   • 使您的 css 更加简洁、更容易理解。
2. 特异性控制：
   • 帮助您更轻松地覆盖样式，因为 :where() 的特异性为零。
3. 增强的可维护性：
   • 通过对选择器进行分组，您可以使 css 更加模块化且更易于维护。

现实示例：
想象一下您有一个带有导航栏的网站。您想要以不同的方式设置活动导航链接的样式。您可以使用 :where() 来定位 :hover 和 :active 状态：

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

结论：
通过理解并有效地使用 :where()，您可以编写更高效、可维护且优雅的 css 代码。对于任何 web 开发人员来说，它都是一个有价值的工具。

利用 :where() 进行复杂选择器

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

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

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

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

将 :where() 与其他伪类相结合

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

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

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

使用的最佳实践：where()

1. 明智地使用它：不要过度使用 :where()，因为它会让你的 css 更难以阅读和维护。
2. 优先考虑特异性：虽然 :where() 的特异性为零，但在编写 css 时考虑特异性仍然很重要。
3. 彻底测试：始终在不同的浏览器中测试您的 css 以确保兼容性。

结论：
:where() 伪类对于现代 css 来说是一个很有价值的工具。通过掌握它的用法，你可以编写出更加高效、可维护、优雅的 css 代码。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~