有 CSS 父选择器吗？

Question

如何选择作为锚元素直接父级的

元素？

举个例子，我的 CSS 应该是这样的：

li < a.active {
    property: value;
}

显然，有多种方法可以使用 JavaScript 实现此目的，但我希望 CSS Level 2 本身存在某种解决方法。

我尝试设置样式的菜单是由 CMS 喷出的，因此我无法将活动元素移动到

元素...（除非我对菜单进行主题化）创建模块，我不想这样做）。

Answer 1

您可以使用 :has() CSS 伪-类

但它的浏览器支持有限（目前 Firefox 不支持）。

Answer 2

目前无法以适用于所有浏览器的方式选择 CSS 中元素的父元素。

选择器级别 4 工作草案 包括 :has() 伪类将提供此功能。它将类似于 jQuery 实现，但目前 Firefox 不支持。

li:has(> a.active) { /* styles to apply to the li tag */ }

Firefox 是目前唯一默认不支持它的主流浏览器。

与此同时，如果您需要选择具有完全跨浏览器支持的父元素，则必须在 Firefox 中求助于 JavaScript。