CSS 是不是有类似 jQuery 的 :has() 的东西？

Posted 2023-03-06

【中文标题】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)')

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

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

【问题讨论】：

你想在 has() 选择器中要求什么？

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

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

@BoltClock 啊，我明白了，我的错误:-)

【参考方案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 是您最初尝试匹配的任何内容。

【讨论】：

最好的方法是组织你的 CSS 和标记，使其不必依赖 javascript，即使 CSS 有时有点痛苦。