跳到主内容

是否有 CSS 父选择器?

· 2分钟阅读

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

举个例子,我的 CSS 应该是这样的:

li < a.active {
property: value;
}

显然有一些方法可以用 Javascript 做到这一点,但我希望有某种 CSS Level 2 原生的解决方法。

我试图设计的菜单被 CMS 喷出,所以我无法将活动元素移动到<li>元素......(除非我将菜单创建模块设为主题,而我不想这样做)。

有任何想法吗?

解决方法

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

如果有办法做到这一点,它将在当前的 CSS 选择器规范中的任何一个中:

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

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

但是,截至 2021 年,这仍然不受任何浏览器支持

同时,如果您需要选择父元素,则必须求助于 Javascript。