最近在CSS父选择器 [英] Latest on CSS parent selector

问题描述

我可以找到的有关这方面的最新信息是 W3C选择器4级编辑草案 a>，但是，就我所见，它没有提到父选择器。

我知道有一个 Google关于此问卷的调查，但现在已经结束了。

父选择器发生了什么？

解决方案

调查最终导致主题选择器（正确的名称为这样的父选择器）被更通用的：has（）伪类替换，这被记录在这里（有一个有趣的锚名， #relational ，我想知道if

实现只有在此特性的规范更稳定时才会到达。目前，有了这样的破坏性更改，如完全用伪类替换主题选择器，我不会在很快就发生。也就是说，很可能：has（）伪类将坚持，但是它是否可以在CSS中实现仍然是被看到由于其本质。请参见同一草案的此部分，了解实施配置文件。

---

原因：has（）更通用，主题选择器，如果单个复杂选择器可以具有多个主体选择器（因为单个复杂选择器只能有一个主体）和/或如果功能伪类例如：matches（）接受主题选择器。但因为一个伪类是一个简单的选择器，你知道：has（）可以被接受的任何一个伪类接受。

作为示例，这使得这样的选择器在理论上是可能的：

  / * 
 *选择任何p 
 *，它是具有多个li子的ul 
 *的兄弟。 
 * / 
 ul：has（> li + li）〜p，/ * p在ul * / 
p：has（〜ul：has（> li + * p先于ul * / 
  

而使用主题选择器，这只有在：matches（）接受主题选择器，它从未直接在规范中说明：

  ul：matches（！> li + li）〜p，/ * p在ul * / $ p之前ul * / 
！ b $ b 

你也可以在这里看到为什么我不喜欢名称父选择器可以用于更多。

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, you know that :has() can 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 + li) ~ p,     /* p follows ul */
p:has(~ ul:has(> li + li)) /* 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 + li) ~ p, /* p follows ul */
!p ~ ul:matches(! > li + li) /* 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屋！