：有一个无情的选择器

在将CSS :has() 选择器发布到《年鉴》的过程中，发生了一件小插曲。我最初将:has() 描述为一个“宽容”的选择器，其含义是，其参数中的任何内容都会被评估，即使其中一个或多个项目无效。

/* 示例：请勿使用！*/
article:has(h2, ul, ::-scoobydoo) { }

看到::-scoobydoo了吗？这完全无效。一个宽容的选择器列表会忽略该无效选择器，并继续评估其余项目，就像这样编写一样：

article:has(h2, ul) { }

在2022年5月7日之前的草案中，:has() 确实是一个宽容的选择器。但在报告了一个问题后，情况发生了变化，该问题指出，当:has() 包含复杂选择器（例如header h2 p）时，其宽容特性与jQuery冲突。W3C 在几周前找到了一个解决方案，即将:has() 制定为“非宽容”选择器。

因此，我们之前的示例？整个选择器列表无效，因为无效选择器无效。但其他两个宽容选择器:is() 和:where() 保持不变。

对此有一个变通方法。请记住，:is() 和 :where() 是宽容的，即使 :has() 不是。这意味着我们可以将这两个选择器中的任何一个嵌套在 :has() 中以获得更宽容的行为：

article:has(:where(h2, ul, ::-scoobydoo)) { }

您使用哪个可能很重要，因为:is() 的特异性由其列表中最特异的项目决定。因此，如果您需要不太特异的内容，最好使用:where()，因为它不会增加特异性分数。

/* 特异性：(0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { }

/* 特异性：(0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

我们更新了一些帖子以反映最新信息。我看到野外还有很多其他需要更新的内容，所以这是一个针对任何需要执行相同操作的人的小型公共服务公告。

以上是：有一个无情的选择器的详细内容。更多信息请关注PHP中文网其他相关文章！