锐客网

  1. 首页 > it技术 > >

【CSS Weekly #486】CSS中 :has() 选择器不仅仅是一个“父选择器”

前端csscss3

欢迎有兴趣的小伙伴，一起做点有意义的事！
我发起了一个周刊翻译计划，仓库地址，访问地址
现在还很缺志同道合的小伙伴，纯属个人兴趣，当然对于提升英语和前端技能也会有帮助，要求：英语不要差的离谱、github熟练使用、有恒心、谦虚、对自己做的事负责。
想参与的小伙伴，可以wx私信，也可以给仓库发issue留言，我博客也有具体的个人联系方式：daodaolee.cn
【CSS Weekly #486】CSS中 :has() 选择器不仅仅是一个“父选择器”
文章图片

Safari 技术预览版 137 刚刚发布，对 CSS :has() 提供未标记的支持。通常被称为“父选择器”的 :has() 远不止于此……
CSS :has()? 根据 selectors-4规范：
如果任何带参数的选择器至少匹配一个元素，那么 :has() 伪类就代表一个元素。
该选择器被称为“父选择器”，默认情况确实允许您选择具有某些子元素的父元素。
/* 匹配包含 子元素的元素 */ a:has(img) { … }/* 匹配包含直接后代子元素的元素 */ a:has(> img) { … }/* 匹配不包含任何H元素的元素：: */ section:not(:has(h1, h2, h3, h4, h5, h6))

赞！
不仅仅是父选择器哦 :has() 不仅仅是一个父选择器。正如 Adrian Bece 在 Smashing Magazine 上的帖子中所分享的：
/* 匹配具有
作为子元素的
元素 */ figure:has(figcaption) { … }/* 匹配包含
子元素的
的子元素的 元素 */ figure:has(figcaption) img { … }

下面是规范中的另一个示例：
/* 仅当 元素紧随其后时才匹配元素 */ h1:has(+ p) { … }

当然它也支持 +, ~, > …只要是符合 的参数都可以。
其他特性 就像 :is() 一样，:has() 具有以下特定特征：
  1. :has() 选择器的预发是有容错性的
  2. :has() 的特性在于它传的参数
浏览器兼容 如前所述，当前只有Safari TP 137支持它（未标记），Chromium团队目前也在努力实现它，关于火狐浏览器还没有消息。
  • WebKit/Safari: Issue #227702 — 已解决
  • Blink/Chromium: Issue #669058 — 进行中
  • Gecko/Firefox: Issue #418039 — 进行中
相关链接 原文链接
【【CSS Weekly #486】CSS中 :has() 选择器不仅仅是一个“父选择器”】翻译计划原文

    推荐阅读


    上一篇：【Frontend Focus #532】前端性能优化

    下一篇：uniapp项目中配置全局less文件