CSS :is()和:where()，未来已来，你用好了吗？

探索 CSS :is() 和 :where()：掌握强大的选择器

在 Web 开发中，选择器是用于选择网页上元素的强大工具。通过 CSS 的 :is() 和 :where() 伪类，我们可以进一步提升选择器的能力，让我们选择符合多个条件的元素，在复杂的页面布局中发挥重要作用。

CSS :is()：简化选择器列表

:is() 伪类可以简化包含重复的选择器列表，这在处理未经整理的 CSS 代码时特别有用。例如，以下原始代码分别为 p、h1、h2 和 h3 元素设置了红色：

p,
h1,
h2,
h3 {
  color: red;
}

使用 :is()，我们可以将这些选择器合并成一个更易读的列表：

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

CSS :where()：强大且灵活的选择器

与 :is() 类似，:where() 伪类提供了更强大、更灵活的选择功能。它允许我们选择同时满足多个条件的元素，无论它们是否相邻。

例如，以下代码选择在容器中悬停时包含 p 元素的元素，并将其文本颜色设置为蓝色：

:where(.container:hover p) {
  color: blue;
}

浏览器支持

目前，:is() 和 :where() 伪类的浏览器支持情况如下：

• Safari： 支持（技术预览版 106 及更高版本）
• Firefox： 支持（版本 78 及更高版本）
• Chrome： 尚未支持

处理 Chrome 的不兼容性

由于 Chrome 尚未支持 :is() 和 :where()，因此我们需要考虑如何处理这种不兼容性。我们可以使用 CSS 预处理器，例如 Sass，来实现这些伪类。

以下 Sass 代码实现了 :is() 伪类：

@mixin is($selector, ...) {
  #{$selector} {
    @content;
  }
}

要实现 :where() 伪类，我们可以使用以下 Sass 代码：

@mixin where($selector, ...) {
  #{&} :is($selector) {
    @content;
  }
}

总结

:is() 和 :where() 伪类为 CSS 选择器提供了新的强大功能，帮助我们编写更简洁、更强大的样式。虽然 Chrome 目前尚未支持这些伪类，但我们可以使用 CSS 预处理器来解决不兼容性。掌握这些选择器，让我们尽情享受 CSS 的最新功能，提升网页布局的精准度和效率。

常见问题解答

1. :is() 和 :where() 有什么区别？

:is() 用于简化重复的选择器列表，而 :where() 用于选择同时满足多个条件的元素。

2. Chrome 何时支持 :is() 和 :where()？

目前尚未公布 Chrome 支持 :is() 和 :where() 的时间表。

3. 我应该在项目中使用 :is() 和 :where() 吗？

如果你需要支持所有现代浏览器，则应避免使用 :is() 和 :where()。但是，如果你只想支持支持这些伪类的浏览器，则可以将它们用于提高代码的可读性和维护性。

4. 除了 :is() 和 :where()，还有哪些其他强大的 CSS 选择器？

其他强大的 CSS 选择器包括：

• :nth-child()： 选择父元素中处于特定位置的子元素。
• :not()： 选择不匹配指定选择器的元素。
• :has()： 选择包含指定元素的元素。

5. 如何学习使用 :is() 和 :where()？

最佳学习方式是通过实践。尝试在你的项目中使用这些伪类，并参考在线文档和教程来了解更多信息。