如何选择作为锚元素的直接父元素的<li>元素？
例如，我的CSS应该是这样的：
li < a.active {
property: value;
}
很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。
当前回答
只是一个水平菜单的想法。。。
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%; }
更新的演示和其余代码
另一个示例是如何将其用于文本输入-选择父字段集
其他回答
您可以使用以下脚本：
*! > input[type=text] { background: #000; }
这将选择文本输入的任何父级。但等等，还有很多。如果需要，可以选择指定的父级：
.input-wrap! > input[type=text] { background: #000; }
或在它处于活动状态时选择它：
.input-wrap! > input[type=text]:focus { background: #000; }
查看此HTML：
<div class="input-wrap">
<input type="text" class="Name"/>
<span class="help hide">Your name sir</span>
</div>
当输入激活时，您可以选择该span.help并显示：
.input-wrap! .help > input[type=text]:focus { display: block; }
还有更多的功能；只需查看插件的文档即可。
顺便说一下，它在Internet Explorer中工作。
我会雇佣一些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 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
只是一个水平菜单的想法。。。
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%; }
更新的演示和其余代码
另一个示例是如何将其用于文本输入-选择父字段集
您可以尝试使用超链接作为父级，然后在悬停时更改内部元素。这样地：
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
这样，您可以根据父元素的滚动来更改多个内部标记中的样式。
