如何选择作为锚元素的直接父元素的<li>元素？
例如，我的CSS应该是这样的：
li < a.active {
property: value;
}
很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。
当前回答
W3C排除了这种选择器，因为它会对浏览器产生巨大的性能影响。
其他回答
虽然目前标准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
我会雇佣一些JavaScript代码来实现这一点。例如，在React中，当您遍历数组时，向父组件添加另一个类，这表明它包含您的子组件：
<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
{kiddos.map(kid => <div key={kid.id} />)}
</div>
然后简单地：
.parent {
color: #000;
}
.parent.has-kiddos {
color: red;
}
正如其他一些人所提到的，没有一种方法可以仅使用CSS来设置元素的父级，但以下方法适用于jQuery：
$("a.active").parents('li').css("property", "value");
CSS父选择器（也称为：has（）选择器）终于在Safari TP 137中落地。该功能目前也在Chrome中实现。（MDN文档）
父级选择是通过伪类：has（）完成的。例如，div:hhas（>.child）将选择具有子类的子级的所有＜div＞元素。
其他示例：
选择元素的直接父级
<div>
<p>Child Element</p>
</div>
div:has(> p)
选择元素的所有父级
<div id="grandparent">
<div id="parent">
<div id="child"></div>
<div>
</div>
以下选择器将同时选择祖父母和父母
div:has(.child)
您还可以将其用于嵌套选择器，甚至用于其他伪类：
div:has(> :nth-child(10))
可以使用其他有效的CSS运算符自定义查询。
密切关注caniuse.com/css-has的浏览器兼容性。
从技术上讲，没有直接的方法可以做到这一点。但是，您可以使用jQuery或JavaScript进行排序。
然而，你也可以这样做。
a.active h1 {color: blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
如果您想使用jQuery实现这一点，这里是jQuery父选择器的引用。
