是否有CSS父选择器？

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

例如，我的CSS应该是这样的：

li < a.active {
    property: value;
}

很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。

我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。

当前回答

W3C排除了这种选择器，因为它会对浏览器产生巨大的性能影响。

其他回答

我知道OP正在寻找CSS解决方案，但使用jQuery很容易实现。在我的例子中，我需要为包含在子<li>中的<span>标记找到<ul>父标记。jQuery具有：has选择器，因此可以通过它包含的子项来标识父项：

$("ul:has(#someId)")

将选择具有id为someId的子元素的ul元素。或者，为了回答最初的问题，应该使用以下方法（未经测试）：

$("li:has(.active)")

Selectors Level 4 Working Draft包含一个：has（）伪类，将提供此功能。它将类似于jQuery实现，但目前Firefox不支持。

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

截至2022年，Firefox是唯一默认不支持它的浏览器。

同时，如果需要选择完全支持跨浏览器的父元素，则必须在Firefox中使用JavaScript。

CSS选择器“General Sibling Combinator”可能用于您想要的用途：

E ~ F {
    property: value;
}

这匹配前面有E元素的任何F元素。

正如其他一些人所提到的，没有一种方法可以仅使用CSS来设置元素的父级，但以下方法适用于jQuery：

$("a.active").parents('li').css("property", "value");

您可以使用以下脚本：

*! > 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>

当输入激活时，您可以选择该span.help并显示：

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

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

顺便说一下，它在Internet Explorer中工作。

推荐文章