CSS 选择器:is() 和 :where() 与 :has() 有什么功能

作者：大漠 日期：2021-12-25 点击：3201
CSS
伪类选择器
CSS选择器
选择器
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

对于 CSSer 而言，CSS 选择器是 CSS 领域最基础不过的知识了，他虽基础，但在给元素设置样式，选择器是不可或缺的。正所谓，“众里寻他千百度，蓦然回首，那人却在灯火阑珊处”！在 Web 开发中，我们需要通过选择器的能力，在众人中找到想找到的人。话又说回来，选择器虽然简单，但它却很重要，就从 W3C 规范中有关于选择器版本的迭代中也能说明这一点（现在已经是 Level 4 版本了）。事实上，早在2018年年底我就在《初探CSS 选择器Level 4》一文中和大家一起探讨了在选择器 Level 4 中新增的选择器。

可以肯定的是，在那个时候，大部分同学都认为，这一切太早了，还不知道什么时候能得到主流浏览器支持呢？看上去是没啥问题，但对于我而言，我一直希望自己能把 CSS 方面最新的特性带给大家。暂时抛开新不说，回到CSS选择器来说，就在小站，从最初开始写博客，这部分就是重要内容之一。到今天，可以在小站上看到关于 CSS 选择器 方面的内容已有多篇：

我一直在重构《图解CSS》中有关于选择器的内容，只因其更新迭代太快，为此一直延迟到今天还未完成。

你可能已经从标题中预判到了，接下来要和大家聊的是 CSS 选择器中的 :is()、:has() 和 :where() 三个伪类选择器。这三个选择器也是今年（虽然2021年马上就要结束了）最为热门的、讨论最多的选择器特性，甚至可以说是大家一直以来期待的选择器。如果你阅读过《初探CSS 选择器Level 4》一文，我想你对 :is() 和 :has()会略有了解。如果你从未接触过，也不要紧。接下来，将和大家一起聊聊这三个选择器，因为这三个选择器真的很有意思。那么接下来，我们就一起来聊聊这三个选择器有何功能，能帮我解决什么样的问题？

:is()

首先要说的是， :is()、:has() 和 :where() 选择器都隶属于 CSS 选择器 Level 4版本中，它们虽称为选择器，但也被称为 CSS 伪类函数，也可以纳入到 CSS 函数的体系中 。我们先从:is()选择器开始！

:is() 选择器它取替了早期的 :any() 和 :matches() 选择器！因此也被称为 “匹配任何” 的伪类选择器。

CSS 的 :is() 选择器（伪类函数）接受一个选择器列表作为其参数，即，它可以接受一个选择器的列表来尝试匹配。这样一来，开发者就可以以更紧凑的形式编写大型选择器。通过一个简单地示例来帮助大家理解。

在编写 CSS 时，有时可能会使用组合选择器（可能是很长的选择器列来）来选择具有相同样式规则的多个元素。如：

button.focus,
button:focus {
    /* CSS Code */
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
    /* CSS Code */
}

上面的选择器，使用 :is()选择器的话，可以变成：

button:is(.focus, :focus) {
    /* CSS Code */
}

article > :is(h1, h2, h3, h4, h5, h6) {
    /* CSS Code */
}

是不是简化很多了。

上面示例所演示的只是 :is() 选择器最基础的使用，但它有几个重要的事实，即 :is() 伪类函数中的列表参数有几个独特行为：

  • :is() 伪类函数的列表值是宽松的：如果列表中的选择器是无效的，规则将继续匹配有效的选择器
  • :is() 选择器的权重是根据其列表来计算的
  • :is() 伪类函数的列表值中不能使用伪元素（至少到目前为止是这样）
  • :is() 伪函数的成组

:is() 伪函数的参数（列表值）是宽容的

:is() 伪函数对于其参数（即一个选择在列表）是很友好，很宽容的。假设你手误在 :is() 伪函数中输入一个无效的选择器，比如：

:is(-ua-invalid, article, p, $css:rocks) {
    color: hotpink;
}

熟悉 CSS 选择器的同学应该都能一眼看出，列表参数中-ua-invalid 和 $css:rocks 是个无效的选择器。在不使用:is()选择器时，如果直接这样书写一个选择器列表，客户端会将整个列表选择器视为一个无效选择器，相应的 article 和 p 元素也不会有任何样式（color: hotpink 不会运用到 HTML 中的 <article> 和 <p>元素上）：

庆幸的是，:is() 是一个非常友好，非常宽容的选择器，它会忽略列表选择器中无效的选择器（-un-invalid 和 $css:rocks 直接被忽略），同时保持列表中其他部分（有效的选择器）。因此，加上:is()之后，文档中的<article> 和 <p> 元素的文本都将为会 hotpink色：

这在少数情况下是非常有用的，比如一些必须依赖浏览器供应商前缀的选择器，而将有前缀和无前缀的选择器分组会导致规则在所有浏览器中失败。使用 :is() 选择器，你可以安全地将这些样式分组，当它们匹配时就会应用，当它们不匹配时就会忽略。

:is() 选择器权重是其根据其列表参数的权重来计算的

:is() 选择器另一个有意思的是它的权重（指的是

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css/css-selector-is-and-where-and-has-function.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部