如何选择<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。