🥳 欢迎有兴趣的小伙伴,一起做点有意义的事!
现在还很缺志同道合的小伙伴,纯属个人兴趣,当然对于提升英语和前端技能也会有帮助,要求:英语不要差的离谱、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()
具有以下特定特征:
:has()
选择器的预发是有容错性的:has()
的特性在于它传的参数
浏览器兼容
如前所述,当前只有Safari TP 137支持它(未标记),Chromium团队目前也在努力实现它,关于火狐浏览器还没有消息。
- WebKit/Safari: Issue #227702 — 已解决
- Blink/Chromium: Issue #669058 — 进行中
- Gecko/Firefox: Issue #418039 — 进行中
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。