如何选择作为锚元素的直接父元素的<li>元素？
例如，我的CSS应该是这样的：
li < a.active {
property: value;
}
很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。
当前回答
有一个插件可以扩展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 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
尝试将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: ...
}
只是一个水平菜单的想法。。。
HTML的一部分
<div class='list'>
<div class='item'>
<a>Link</a>
</div>
<div class='parent-background'></div>
<!-- submenu takes this place -->
</div>
CSS的一部分
/* Hide parent backgrounds... */
.parent-background {
display: none; }
/* ... and show it when hover on children */
.item:hover + .parent-background {
display: block;
position: absolute;
z-index: 10;
top: 0;
width: 100%; }
更新的演示和其余代码
另一个示例是如何将其用于文本输入-选择父字段集
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的浏览器兼容性。
没有父选择器；就像以前没有兄弟选择器一样。不使用这些选择器的一个很好的原因是，浏览器必须遍历元素的所有子元素，以确定是否应应用类。例如，如果您写道：
body:contains-selector(a.active) { background: red; }
然后，浏览器必须等到加载并解析完所有内容，直到</body>确定页面是否应为红色。
《为什么我们没有父选择器》一文详细解释了这一点。
