有一个 CSS 父选择器吗？

如何选择<li>元素作为锚元素的直接父元素？

在示例中，我的 CSS 将是这样的：

li < a.active {
    property: value;
}

显然有一些方法可以使用 JavaScript 来实现这一点，但我希望 CSS Level 2 本身存在某种解决方法。

我尝试设置样式的菜单正在由 CMS 喷出，因此我无法将活动元素移动到<li>元素...（除非我主题菜单创建模块，我宁愿不这样做）。

有任何想法吗？

答案

目前无法在 CSS 中选择元素的父级。

如果有办法，它将在当前 CSS 选择器规范中的任何一个：

与此同时，如果您需要选择父元素，则必须使用 JavaScript。

使用:has()原始问题可以通过以下方法解决：

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

我认为你不能只选择 css 中的父级。

但是，由于您似乎已经拥有.active类， .active类移动到li （而不是a ）会不会更容易？这样你就可以只访问li和a via css。

您可以使用此脚本。

*! > input[type=text] { background: #000; }

这将选择文本输入的任何父级。但是等等，还有更多。如果需要，可以选择指定的父级：

.input-wrap! > input[type=text] { background: #000; }

或者在它处于活动状态时选择它：

.input-wrap! > input[type=text]:focus { background: #000; }

看看这个 HTML：

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

您可以在input处于活动状态时选择span.help并显示它：

.input-wrap! .help > input[type=text]:focus { display: block; }

还有更多功能; 只需查看插件的文档。

顺便说一下，它适用于 IE。