最新的CSS父选择器

Question

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

我知道谷歌有一项关于此的调查,但现在已经结束了.

父选择器发生了什么？它会被引入,还是被删除了？

Answer 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 */

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