小编典典

有 CSS 父选择器吗?

javascript

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

例如,我的 CSS 是这样的:

li < a.active {
    property: value;
}

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

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

有任何想法吗?


阅读 72

收藏
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