是否有一种方法可以根据类中的子元素的类来选择父元素?这个例子是与我有关的HTML输出的一个很好的菜单插件http://drupal.org。输出是这样呈现的:
<ul class="menu">
<li>
<a class="active">Active Page</a>
</li>
<li>
<a>Some Other Page</a>
</li>
</ul>
我的问题是，是否可以将样式应用到包含活动类的锚的列表项。显然，我更希望将列表项标记为活动，但我无法控制生成的代码。我可以使用javascript (JQuery弹簧想到)执行这类事情，但我想知道是否有一种方法来做到这一点使用CSS选择器。
为了明确起见，我想对列表项应用样式，而不是锚。
当前回答
未来答案与CSS4选择器
新的CSS规范包含一个实验性的:有伪选择器，可能能够做这件事。
li:has(a:active) {
/* ... */
}
目前浏览器对这方面的支持基本不存在，但官方规范正在考虑。
2012年的答案在2012年是错误的，在2018年更是错误的
虽然CSS确实不能ASCEND，但不能抓取另一个元素的父元素是不正确的。让我重申:
使用HTML示例代码，可以在不指定li的情况下获取li
ul * a {
property:value;
}
在这个例子中，ul是某个元素的父元素，而该元素是anchor的父元素。使用此方法的缺点是，如果ul的任何子元素包含一个锚，它将继承指定的样式。
你也可以使用子选择器，因为你必须指定父元素。
ul>li a {
property:value;
}
在这个例子中，锚必须是li的后代，li必须是ul的子结点，这意味着它必须在ul声明之后的树中。这将更具体一点，它只抓取包含锚点并且是ul的子元素的列表项。
所以，用代码来回答你的问题。
ul.menu > li a.active {
property:value;
}
这将抓取带有menu类的ul，以及只包含带有active类的锚的子列表项。
其他回答
根据维基百科:
选择者无法提升 CSS不提供选择满足特定条件的元素的父元素或祖先元素的方法。更高级的选择器方案(比如XPath)将支持更复杂的样式表。然而，CSS工作组拒绝父选择器建议的主要原因与浏览器性能和增量呈现问题有关。
对于将来搜索SO的人来说，这也可能被称为祖先选择器。
更新:
Selectors Level 4 Spec允许您选择选择的哪个部分是主题:
The subject of the selector can be explicitly identified by prepending a dollar sign ($) to one of the compound selectors in a selector. Although the element structure that the selector represents is the same with or without the dollar sign, indicating the subject in this way can change which compound selector represents the subject in that structure. Example 1: For example, the following selector represents a list item LI unique child of an ordered list OL: OL > LI:only-child However the following one represents an ordered list OL having a unique child, that child being a LI: $OL > LI:only-child The structures represented by these two selectors are the same, but the subjects of the selectors are not.
尽管这在任何浏览器中都不可用(目前是2011年11月)，也不能作为jQuery的选择器。
“父”选择器
现在，在CSS中没有选择元素父元素的选项(甚至CSS3也没有)。但是对于CSS4，当前W3C草案中最重要的消息是对父选择器的支持。
$ul li:hover{
background: #fff;
}
使用上述方法，当悬停一个列表元素时，整个无序列表将通过添加白色背景来突出显示。
官方文档:https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview(最后一行)。
未来答案与CSS4选择器
新的CSS规范包含一个实验性的:有伪选择器，可能能够做这件事。
li:has(a:active) {
/* ... */
}
目前浏览器对这方面的支持基本不存在，但官方规范正在考虑。
2012年的答案在2012年是错误的，在2018年更是错误的
虽然CSS确实不能ASCEND，但不能抓取另一个元素的父元素是不正确的。让我重申:
使用HTML示例代码，可以在不指定li的情况下获取li
ul * a {
property:value;
}
在这个例子中，ul是某个元素的父元素，而该元素是anchor的父元素。使用此方法的缺点是，如果ul的任何子元素包含一个锚，它将继承指定的样式。
你也可以使用子选择器，因为你必须指定父元素。
ul>li a {
property:value;
}
在这个例子中，锚必须是li的后代，li必须是ul的子结点，这意味着它必须在ul声明之后的树中。这将更具体一点，它只抓取包含锚点并且是ul的子元素的列表项。
所以，用代码来回答你的问题。
ul.menu > li a.active {
property:value;
}
这将抓取带有menu类的ul，以及只包含带有active类的锚的子列表项。
你可以使用has():
li:has(a:active) {
/* ... */
}
不幸的是，CSS没有办法做到这一点。
用JavaScript实现并不难:
// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;
// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.
很多人用jQuery parent来回答，但为了补充这个问题，我想分享一个简短的代码片段，它是我用来向导航中添加类的，这样我就可以为只有子菜单的li添加样式，而不是没有子菜单的li。
$("li ul").parent().addClass('has-sub');
