关于前端:CSS-Weekly-486CSS中-has-选择器不仅仅是一个父选择器

🥳 欢送有趣味的小伙伴，一起做点有意义的事！

我发动了一个 周刊翻译打算，仓库地址，拜访地址

当初还很缺气味相投的小伙伴，纯属个人兴趣，当然对于晋升英语和前端技能也会有帮忙，要求：英语不要差的离谱、github 纯熟应用、有恒心、虚心、对本人做的事负责。

想参加的小伙伴，能够 wx 私信，也能够给仓库发 issue 留言，我博客也有具体的集体联系方式：daodaolee.cn

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

CSS :has()?

依据 selectors- 4 标准：

如果任何带参数的选择器至多匹配一个元素，那么: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 在 Smashing Magazine 上的帖子中所分享的：

/* 匹配具备 <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: Issue #227702 — 已解决
• Blink/Chromium: Issue #669058 — 进行中
• Gecko/Firefox: Issue #418039 — 进行中

相干链接

原文链接

翻译打算原文