🥳 欢迎有兴趣的小伙伴，一起做点有意义的事！本文译者：

https://github.com/daodaolee

我发起了一个周刊翻译计划，仓库地址：

https://github.com/FEDarling

，访问地址：

https://fedarling.github.io/fe-translate-weekly/

现在还很缺志同道合的小伙伴，纯属个人兴趣，当然对于提升英语和前端技能也会有帮助，要求：英语不要差的离谱、github熟练使用、有恒心、谦虚、对自己做的事负责。

想参与的小伙伴，可以

https://cdn.jsdelivr.net/gh/daodaolee/photobed/img/202111162148554.jpg

联系我，也可以给仓库发issue留言，我博客也有具体的个人联系方式：

https://daodaolee.cn/

Safari 技术预览版 137 刚刚发布，对 CSS :has() 提供未标记的支持。通常被称为“父选择器”的 :has() 远不止于此……

CSS :has()?

根据

https://drafts.csswg.org/selectors-4/#has-pseudo

如果任何带参数的选择器至少匹配一个元素，那么:has() 伪类就代表一个元素。

该选择器被称为“父选择器”，默认情况确实允许您选择具有某些子元素的父元素。

/* 匹配包含 <img> 子元素的 <a> 元素 */
a:has(img) { … }

/* 匹配包含<img>直接后代子元素的<a>元素 */
a:has(> img) { … }

/* 匹配不包含任何H元素的 <section> 元素：: */
section:not(:has(h1, h2, h3, h4, h5, h6))

赞！

不仅仅是父选择器哦

:has() 不仅仅是一个父选择器。正如 Adrian Bece 在

https://www.smashingmagazine.com/2021/06/has-native-css-parent-selector/#css-has-pseudo-class-specification

/* 匹配具有 <figcaption> 作为子元素的 <figure> 元素 */
figure:has(figcaption) { … }

/* 匹配包含 <figcaption> 子元素的 <figure> 的子元素的 <img> 元素 */
figure:has(figcaption) img { … }

下面是规范中的另一个示例：

/* 仅当 <p> 元素紧随其后时才匹配 <h1> 元素 */
h1:has(+ p) { … }

当然它也支持 +, ~, > …只要是符合 <forgiving-relative-selector-list> 的参数都可以。

其他特性

就像 :is() 一样，:has() 具有以下特定特征：

1. :has() 选择器的预发是有容错性的
2. :has() 的特性在于它传的参数

浏览器兼容

如前所述，当前只有Safari TP 137支持它（未标记），Chromium团队目前也在努力实现它，关于火狐浏览器还没有消息。

• WebKit/Safari:

  https://bugs.webkit.org/show_bug.cgi?id=227702

  — 已解决
• Blink/Chromium:

  https://bugs.chromium.org/p/chromium/issues/detail?id=669058

  — 进行中
• Gecko/Firefox:

  https://bugzilla.mozilla.org/show_bug.cgi?id=418039

  — 进行中

相关链接

https://www.bram.us/2021/12/21/the-css-has-selector-is-way-more-than-a-parent-selector/?utm_source=CSS-Weekly&utm_campaign=Issue-486&utm_medium=web

https://github.com/FEDarling/fe-translate-weekly/blob/master/CSS_Weekly/486/has_selector.md