如何选择<li>作为锚元素的直接父元素的元素?
<li>
例如,我的 CSS 是这样的:
li < a.active { property: value; }
显然有一些使用 JavaScript 的方法,但我希望有某种解决方法存在于 CSS Level 2 中。
我试图设置样式的菜单被 CMS 吐出,所以我无法将活动元素移动到<li>元素…(除非我为菜单创建模块设置主题,我不想这样做)。
有任何想法吗?
目前没有办法在 CSS 中选择元素的父级。
如果有办法做到这一点,它将在当前的 CSS 选择器规范中:
选择器 3 级规范 CSS 2.1 选择器规范 也就是说,Selectors Level 4 Working Draft包括一个:has()伪类,可以提供这种能力。它将类似于jQuery 实现。
Selectors Level 4 Working Draft
has()
li:has(> a.active) { /* styles to apply to the li tag */ }
但是,截至 2021 年,任何浏览器仍然不支持此功能。
同时,如果您需要选择父元素,则必须使用 JavaScript。