:哪里:CSS 在哪里？

在这篇文章中，我们将讨论不太新的功能性伪类选择器:is()和:where()。

我们将了解它们的具体工作原理、它们的区别以及何时使用它们来充分利用这些 CSS 功能。

1. CSS :is

:is()我们先从伪类选择器开始，然后讨论:where()它们之间的区别。

什么是:is()？

最初名为:matches()和:any()，:is()是一个函数式伪类选择器。这意味着它是一个 CSS 可识别的关键字，由冒号 (:) 加上伪类名称和一对用于定义参数的括号组成。

:is()以逗号分隔的选择器列表作为参数，并选择列表中任何可被选择器选中的元素。让我们看一些用例。

针对父母

假设我们需要设置位于或 中font-size的每个段落元素（ ） ，我们可以使用以更紧凑的形式来写出它：<p><section><article>:is()

当然，在这个例子中，我们只删除了一行，但稍后我们会看到，我们可以使用它删除更多内容来编写更紧凑的代码。

针对儿童

现在假设我们需要针对每一个<b>和<strong>内部<article>设置它们的font-weight属性，我们可以这样:is()做：

合并多个:is()

如果我们想要定位位于或内部的<b>每个 ，则它将如下所示：<strong>pspan<article>section

在上面的例子中，我们可以看到它使代码更加简洁。在我看来，它也使代码更具可读性，更易于维护。

应用于is()当前元素

正如我们之前看到的，before 之间的空格:is()非常重要。如果我们删除它，就会得到如下结果：article:is(b)我们要求的article元素本身也是一个b不可能存在的元素。

我们可以用来:is()检查一个元素是否是，例如first-child，或者last-child在这种情况下，我们不把空格放在前面:is()：

is()宽容

通常情况下，如果逗号分隔列表中的任何一个选择器无效，则所有选择器都将无效，并且整个表达式将无法匹配任何内容。但使用 时则不会出现这种情况is()：

特异性

:is()取其最具体的选择器的特异性。这意味着，:is(p, .some-class, #some-id)其 ID 的特异性得分为 100 分，:is(p, .some-class)其类的特异性得分为 10 分。

为了了解为什么牢记这一点很重要，让我们考虑下面的例子：

上面的矩形是橙色的，因为的特异性得分.wrapper .rect为 20，而的特异性得分:is(.rect, #some-id)等于其最具体的选择器的特异性#some-id（100 分）。

2. 任何地方

现在我们已经熟悉了is()伪类选择器，让我们来讨论一下where()。

什么是:where()？

where()也是一个函数式伪类选择器，其工作原理类似于is()。它接受一个以逗号分隔的选择器列表作为参数，并选择列表中任何一个选择器能够选中的元素。我们可以像使用 一样使用它来定位元素is()，而且它同样具有容错性。

那么，如果它的工作原理与 相同，为什么它还存在呢is()？
因为它的工作原理并不完全相同。

区别

唯一的区别是 的特殊性:where()始终为零。就是这样。

因此，如果我们以前面的例子为例，:where(p, .some-class, #some-id)的特异性得分将为零。 的情况也一样:where(p, .some-class)。

何时使用它？

每次你都想保持较低的优先级，我认为这在大多数情况下是件好事。
例如，使用:where()你可以轻松地通过元素的 ID 来定位它，而不会影响优先级。

浏览器兼容性

所有常用浏览器都支持这两个功能性伪类选择器：_来源🔗

包起来

这篇文章就到这里。我们了解了如何使用:is&:where以及它们之间的区别。但在你重写整个 CSS 代码库之前，请记住，你的团队已经习惯了可读性，所以最好先讨论一下这个问题 :)

干杯!