一尘不染

最新的CSS父选择器

css

我可以找到的最新信息是W3C选择器4级编辑器的草稿,但据我所知,它不再提及父选择器。

我知道有一个关于此的Google调查,但是已经结束了。

父选择器发生了什么?它会被引入还是被移除?


阅读 270

收藏
2020-05-16

共1个答案

一尘不染

在主题选择告终调查(针对所谓的名不符实“家长选择”适当的名称)与远更灵活替换:has()伪类,这是记录在这里(一个有趣的锚的名字,#relational我不知道这是否会坚持)。

只有在此功能的规范更加稳定时,实现才会实现。目前,由于存在一些颠覆性的更改,例如用伪类完全替换了主题选择器,因此我不相信它会很快发生。也就是说,:has()伪类很可能会保留下来,但是由于其本质,它是否可以在CSS中实现还有待观察。请参阅同一草稿的本节,以了解实施配置文件。


:has()用途更广泛的原因是,对于主题选择器,从未在任何草稿中明确指出单个复杂选择器可以具有多个主题选择器(因为单个复杂选择器只能具有一个主题)和/或功能性伪类,例如:matches()接受主题选择器。但是因为伪类是一个简单的选择器,所以您知道:has()在接受伪类的任何地方都可以接受伪类。

举例来说,这使得以下选择器在理论上非常可行:

/* 
 * Select any p
 * that is a sibling of a ul
 * that has more than one li child.
 */
ul:has(> li:nth-of-type(2)) ~ p,     /* p follows ul */
p:has(~ ul:has(> li:nth-of-type(2))) /* p precedes ul */

而使用主题选择器,只有在:matches()接受主题选择器的情况下才有可能,而规范中从未直接说明:

ul:matches(! > li:nth-of-type(2)) ~ p, /* p follows ul */
!p ~ ul:matches(! > li:nth-of-type(2)) /* p precedes ul */

您还可以在这里看到为什么我不喜欢选择器任何一种形式的名称“父选择器”-它可以用于 更多选择

2020-05-16