是否有CSS父选择器？

Question

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

例如，我的CSS将是这样的：

li < a.active {
    property: value;
}

显然，可以使用JavaScript进行此操作，但是我希望CSS Level 2本身具有某种解决方法。

我正在尝试设置样式的菜单已由CMS弹出，因此我无法将活动元素移动到<li>元素…（除非我将菜单创建模块作为主题，但我不希望这样做）。

有任何想法吗？

Answer 1

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

如果有办法，可以在当前的CSS选择器规范中使用：

• 选择器3级规格
• CSS 2.1选择器规格

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

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

但是，截至2020年4月， 任何浏览器仍不支持此功能 。

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