CSS4中是否有父级选择器？

Question

这里有一个fiddle，我有两个div，一个是外部盒子，另一个是innerBox。当单击innerBox时，我需要更改外部box的属性。

由于CSS3无法实现该功能，所以在CSS4中是否有任何可用选项？

- Uday Reddy

---

“CSS4” 这个东西并不存在。 - Liam

你真正想问的是，未来是否会有任何浏览器支持允许你这样做的东西。如果没有水晶球，谁能知道呢？ - Liam

可能是CSS是否有父选择器？的重复问题。 - Jukka K. Korpela

你可以使用http://dev.w3.org/csswg/selectors/#has-pseudo来实现你想要的功能。 - realbart

Answer 1

可能并没有CSS4这样的东西，但确实存在“选择器级别4”。这是下一代选择器的未完成规范，并在规范中包括父级选择器。或者更准确地说，是“主题”选择器。

规范文件在此处：http://dev.w3.org/csswg/selectors/

但请注意，这是一个dev网址，规范仍然是正在进行中的工作。

在实际代码中，主题选择器可能看起来像这样：

div > !.foo > span

这将选择一个具有class为foo的元素，它是

的子元素，并且其内还有一个span作为子元素。但正如我所说，这不是一个完整的规范（实际上，在该过程中，主题选择器的语法已经多次更改，并且仍可能随时遭受进一步的更改）。此外，它在任何浏览器中都没有实现，也没有预期它会在不久的将来得到实现。

此外，即使/当选择器4级在浏览器中得到实现，规范明确说明由于性能原因可以省略一些选择器（它们区分“快速”选择器和“完整”的选择器集）。主题选择器是其中之一：如果规范保持不变，则浏览器对将其添加到CSS中没有任何强制性要求。在这种情况下，他们可能会将其添加到Javascript中，例如用于document.querySelector()等方法，但不会添加到CSS本身。这并不能真正帮助您，因为已经可以通过javascript找到父元素了。（请参见上面链接的规范中的第2.1节了解更多信息）。

所以简短的答案是：不，不可能。将来可能有可能，但这并不能帮助您，即使在将来也可能存在致命缺陷。

（您还可以阅读这篇文章，它比实际规范更适合普通用户。但请注意，自此文写作以来，主题选择器语法已发生更改）

- Spudley

---

请注意，上述“subject”选择器的规范已经在此答案编写后多次更改，因此上面的代码与您实际使用的代码不再相似。但是，它仍然只能在JavaScript中使用，这一点在规范中保持不变，因此答案的核心观点仍然准确。 - Spudley

Answer 2

正如其他答案所指出的那样，不存在“CSS4”，而是CSS选择器4。

在我看来，最好忘记CSS父级选择器，因为它会带来一系列新问题：

使用父级选择器很容易意外地导致整个文档的搜索。人们可以而且会误用这个选择器。支持它就是给人们提供了足够的绳子去绞死自己。

还有：

我所描述的并不是技术上不可能的。事实上，恰恰相反。这只是意味着我们必须处理使用这种功能的性能影响。

但你可以轻松地使用JS甚至使用jQuery来实现。只需在jQuery中调用$('a').parent();即可获取<a>标签的父级。 来源 CSS选择器4最初打算实现此功能，但目前计划仅在JavaScript DOM中实现它，而不是作为CSS选择器，因为它“速度慢”。

- Amit Joki