最新的 CSS 父选择器 [英] Latest on CSS parent selector

问题描述

我能找到的关于这方面的最新信息是 W3C Selectors Level 4 Editor's Draft，但据我所知，它不再提及父选择器了.

我知道有一个 Google 对此进行了调查，但那是现在结束.

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

解决方案

调查的高潮是主题选择器(传说中的父选择器"的正确名称)被替换为更通用的 :has() 伪类，记录在 here(有一个有趣的锚名称，#relational，我想知道它是否会坚持下去).

实现可能仅在此功能的规范更稳定时才会出现.目前，随着像用伪类完全替换主题选择器这样的破坏性变化，我不指望它很快就会发生.也就是说，:has() 伪类很可能会继续存在，但由于其本质，它是否可以在 CSS 中实现仍有待观察.请参阅同一草案的此部分，了解实施配置文件.

---

:has() 更通用的原因是，对于主题选择器，任何草案都没有明确说明单个复杂选择器是否可以有多个主题选择器(因为单个复杂选择器只能有一个主题)和/或如果功能性伪类(如 :matches() 接受主题选择器.但是因为伪类是一个简单的选择器，它正好适合现有的选择器语法，并且您可以可靠地假设 :has() 在任何接受伪类的地方都会被接受.p>

作为一个例子，这使得如下的选择器在理论上是可能的:

/** 选择任何 p* 是 ul 的兄弟* 即有不止一个 li 孩子.*/ul:has(> li:nth-of-type(2)) ~ p,/* p 跟随 ul */p:has(~ ul:has(> li:nth-of-type(2)))/* p 在 ul 之前 */

然而，使用主题选择器，这只有在 :matches() 接受主题选择器时才有可能，而这从未在规范中直接说明:

ul:matches(!> li:nth-of-type(2)) ~ p,/* p 跟随 ul */!p ~ ul:matches(!> li:nth-of-type(2))/* p 在 ul 之前 */

你也可以在这里看到为什么我不喜欢父选择器"这个名字.对于任何一种形式的选择器——它都可以用于更多.

The most recent information I can find regarding this is the W3C Selectors Level 4 Editor’s Draft, but, as far as I can see, it doesn't mention the parent selector anymore.

I know there was a Google survey about this, but that's over now.

What happened to the parent selector? Will it ever be introduced, or has it been removed?

解决方案

The survey culminated in the subject selector (the proper name for the so-fabled "parent selector") being replaced with the far more versatile :has() pseudo-class, which is documented here (with an interesting anchor name, #relational, I wonder if that will stick).

Implementations will probably only arrive when the specification for this feature is more stable. Currently, with such disruptive changes as completely replacing the subject selector with a pseudo-class, I'm not banking on it happening anytime soon. That said, it is likely that the :has() pseudo-class will stick, but whether it can be implemented in CSS remains to be seen due to its very nature. See this section of the same draft to learn about implementation profiles.

---

The reason :has() is more versatile is because, with the subject selector, it was never made clear in any draft if a single complex selector could have more than one subject selector (since a single complex selector can only ever have one subject) and/or if functional pseudo-classes such as :matches() accepted the subject selector. But because a pseudo-class is a simple selector, it fits right into the existing selector syntax, and you can reliably assume that :has() will be accepted anywhere a pseudo-class is accepted.

As an example, this makes such selectors as the following quite theoretically possible:

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

Whereas, using the subject selector, this would only be possible if :matches() accepted the subject selector, which was never stated directly in the spec:

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

You can also see here why I dislike the name "parent selector" for either form of the selector — it can be used for so much more.

这篇关于最新的 CSS 父选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！