CSS有没有类似于jQuery的:has()的功能？

Question

在CSS中（任何版本），是否有像jQuery的:has()选择器一样的东西，或者其他任何方式可以做到类似于:has()选择器的功能？

jQuery(':has(selector)')

描述：选择包含至少一个与指定选择器匹配的元素的元素。

http://api.jquery.com/has-selector/

- Qtax

---

你想在has()选择器中查询什么？ - mightyplow

那不就是一个普通的子元素选择器吗？选择器中的规则将适用于所有匹配的元素。 - andyb

@andyb：:has()是一种条件伪类，类似于:not()。匹配的元素是伪类周围的选择器，而不是括号中的选择器。 - BoltClock

@BoltClock 哦，我懂了，是我的错误。 :-) - andyb

Answer 1

不，没有。CSS的设计方式不允许选择器匹配祖先或前面的兄弟节点；只能匹配后代（和>）、后续兄弟节点（~和+）或特定子元素（:*-child）。唯一的祖先选择器是:root伪类，它选择文档的根元素（在HTML页面中，自然是html）。

如果需要对使用:has()查询的元素应用样式，则需要向其添加CSS类，然后通过该类进行样式设置，如Stargazer712所建议的那样。

- BoltClock

---

Selectors 4 草案提到了一个主题选择器，虽然它在语义上与 jQuery 的 :has() 选择器不同，但如果它被标准化和实现，它在这种情况下也可以很好地工作。 - BoltClock

Answer 2

不可以。最好的方法是使用jQuery：

CSS文件：

.myAwesomeClass {
    ...
}

Js文件：

jQuery(':has(selector)').addClass("myAwesomeClass")

其中selector是您最初尝试匹配的内容。

- riwalk

---

最好的方法是组织您的CSS和标记，使得即使CSS有时会有点麻烦，也不需要依赖JavaScript。 - T.J. Crowder