是否有CSS父选择器？

提问者：小点点

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

元素？

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

li < a.active {
    property: value;
}

显然，JavaScript有很多方法可以实现这一点，但我希望CSS Level2中存在一些原生的变通方法。

我正在尝试样式化的菜单是由CMS吐出的，所以我不能将活动元素移动到

元素。。。（除非我为菜单创建模块设计主题，我不想这样做）。

有什么想法吗？

共3个答案

匿名用户

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

如果有一种方法可以做到这一点，那就是在当前的CSS选择器规范中的任一种:

也就是说，选择器Level 4工作草案包括一个:has()伪类，它将提供这种功能。它将类似于jQuery实现。

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

但截至2020年5月，这仍未得到任何浏览器的支持。

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

匿名用户

我认为您不能只在CSS中选择父项。

但是由于您似乎已经有了一个.active类，因此将该类移到li（而不是a)会更容易。这样，您就可以仅通过CSS访问li和a。

匿名用户

您可以使用以下脚本:

*! > 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中工作。