如何选择作为锚元素的直接父元素的<li>元素？
例如，我的CSS应该是这样的：
li < a.active {
property: value;
}
很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。
当前回答
尝试将a切换为块显示，然后使用所需的任何样式。a元素将填充li元素，您可以根据需要修改其外观。不要忘记将li padding设置为0。
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., etc...
}
a.active {
color: ..., background: ...
}
其他回答
CSS选择器“General Sibling Combinator”可能用于您想要的用途：
E ~ F {
property: value;
}
这匹配前面有E元素的任何F元素。
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
可以使用：has（）CSS伪类
但它的浏览器支持有限（目前只有Chrome/Edge/Safari）。
有一个插件可以扩展CSS，以包含一些非标准功能，这些功能在设计网站时非常有用。这叫做EQCSS。
EQCSS添加的内容之一是父选择器。它适用于所有浏览器，Internet Explorer 8及更高版本。格式如下：
@element 'a.active' {
$parent {
background: red;
}
}
因此，我们在每个元素a.active上打开了一个元素查询，对于该查询中的样式，类似$parent这样的东西是有意义的，因为有一个参考点。浏览器可以找到父节点，因为它与JavaScript中的parentNode非常相似。
这里有一个$parent的演示和另一个在Internet Explorer 8中运行的$parent演示，以及一个屏幕截图，以防您没有Internet Explorer 8进行测试。
EQCSS还包括元选择器：$prev用于所选元素之前的元素，$this仅用于与元素查询匹配的元素，等等。
简短的回答是“否”；在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;
