有 CSS 父选择器吗？

一尘不染

javascript

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

例如，我的 CSS 是这样的：

li < a.active {
    property: value;
}

显然有一些使用 JavaScript 的方法，但我希望有某种解决方法存在于 CSS Level 2 中。

我试图设置样式的菜单被 CMS 吐出，所以我无法将活动元素移动到<li>元素…（除非我为菜单创建模块设置主题，我不想这样做）。

有任何想法吗？

阅读 240

2022-01-12

共1个答案

一尘不染

目前没有办法在 CSS 中选择元素的父级。

如果有办法做到这一点，它将在当前的 CSS 选择器规范中：

选择器 3 级规范
 CSS 2.1 选择器规范
也就是说，Selectors Level 4 Working Draft包括一个:has()伪类，可以提供这种能力。它将类似于jQuery 实现。

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

但是，截至 2021 年，任何浏览器仍然不支持此功能。

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

2022-01-12