如何选择作为锚元素的直接父元素的<li>元素？
例如，我的CSS应该是这样的：
li < a.active {
property: value;
}
很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。
当前回答
虽然目前标准CSS中没有父选择器，但我正在开发一个名为axe（即增强的CSS选择器语法/ACSSSS）的（个人）项目，该项目在其7个新选择器中包括：
一个直接的父选择器<（它允许相反的选择>）任意祖先选择器^（启用与[SPACE]相反的选择）
axe目前处于相对早期的BETA开发阶段。
请在此处查看演示：
.父级{浮动：左侧；宽度：180px；高度：180px；右边距：12px；背景色：rgb（191191191）；}.儿童{宽度：90px；高度：90px；边距：45px；填充顶部：12px；字体系列：无衬线；文本对齐：居中；字体大小：12px；背景色：rgb（255，255，0）；}child.using-axe<父级{背景色：rgb（255，0，0）；}<div class=“parent”><div class=“child”></div></div><div class=“parent”><div class=“child using axe”>这里，axe父选择器将外部方形变为红色。</div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>
在上面的示例中，<是直接父选择器，因此
child.using-axe<父级
指：
.child.uning-axe的任何直接父级，即parent
您也可以使用：
.child.using-axe<div
这意味着：
child.using-axe的任何直接父级，它是一个div
其他回答
没有css（因此在css预处理器中）父选择器，因为“css工作组先前拒绝父选择器建议的主要原因与浏览器性能和增量渲染问题有关。”
我认为你不能只在CSS中选择父级。
但由于您似乎已经有一个.active类，所以将该类移动到li（而不是a）会更容易。这样，您只能通过CSS访问li和a。
简短的回答是“否”；在CSS的这个阶段，我们没有父选择器，但是如果你不需要交换元素或类，第二个选项是使用JavaScript。类似于：
var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));
activeATag.map(function(x) {
if(x.parentNode.tagName === 'LI') {
x.parentNode.style.color = 'red'; // Your property: value;
}
});
或者，如果在应用程序中使用jQuery，可以使用更短的方法：
$('a.active').parents('li').css('color', 'red'); // Your property: value;
下面是一个使用悬停指针事件的黑客：
<!doctype html><html><head><title></title><style>/*附件*/.父级{宽度：200px；高度：200px；背景：灰色；}父母亲.选择器{显示：柔性；对齐内容：中心；对齐项目：居中；}.选择器{光标：指针；背景：银色；宽度：50%；高度：50%；}</style><style>/*相关的*/.父级{背景：灰色；指针事件：无；}.parent:悬停{背景：紫红色；}父母亲.选择器{指针事件：自动；}</style></head><body><div class=“parent”><div class=“selector”></div></div></body></html>
Selectors Level 4 Working Draft包含一个：has（）伪类，将提供此功能。它将类似于jQuery实现，但目前Firefox不支持。
li:has(> a.active) { /* styles to apply to the li tag */ }
截至2022年，Firefox是唯一默认不支持它的浏览器。
同时，如果需要选择完全支持跨浏览器的父元素，则必须在Firefox中使用JavaScript。
