CSS 是否有类似 jQuery 的 :has() 的东西？答案

【问题标题】：Does CSS have anything like jQuery's :has()?CSS 是否有类似 jQuery 的 :has() 的东西？
【发布时间】：2011-09-10 20:34:55
【问题描述】：

在 CSS（任何版本）中，是否有类似 jQuery 中的 :has() 选择器之类的方法或任何其他方式？

jQuery(':has(selector)')

说明： 选择符合以下条件的元素至少包含一种元素匹配指定的选择器。

【问题讨论】：

【解决方案1】：

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

如果您需要对使用:has() 查询的元素应用样式，则需要为其添加一个CSS 类，然后按该类设置样式as suggested by Stargazer712。

【讨论】：

Selectors 4 草案提到了一个主题选择器，尽管它与 jQuery 的 :has() 选择器有不同的语义，但如果它被标准化和实施，在这种情况下也能正常工作。

【解决方案2】：

没有。最好的方法是使用 jQuery：

CSS 文件：

.myAwesomeClass {
    ...
}

Js 文件：

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

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

【讨论】：