是否有一种方法可以根据类中的子元素的类来选择父元素?这个例子是与我有关的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选择器。
为了明确起见，我想对列表项应用样式，而不是锚。
当前回答
你可以使用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>.
其他回答
我刚刚想到的另一个想法可能是一个纯CSS解决方案。将您的活动类显示为一个绝对定位的块，并设置其样式以覆盖父li。
a.active {
position:absolute;
display:block;
width:100%;
height:100%;
top:0em;
left:0em;
background-color: whatever;
border: whatever;
}
/* will also need to make sure the parent li is a positioned element so... */
ul.menu li {
position:relative;
}
对于那些想使用javascript而不使用jquery的人…
选择父对象很简单。您需要某种类型的getElementsByClass函数，除非您可以让drupal插件为活动项分配一个ID而不是Class。我提供的函数是我从SO上的其他天才那里抢来的。它工作得很好，只是在调试时要记住，该函数总是返回一个节点数组，而不仅仅是单个节点。
active_li = getElementsByClass("active","a");
active_li[0].parentNode.style.whatever="whatever";
function getElementsByClass(node,searchClass,tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag); // use "*" for all elements
var elsLen = els.length;
var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
未来答案与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>.
Selectors Level 4的初稿概述了显式设置选择器主题的方法。这将允许OP使用选择器$li > a.active对列表元素进行样式化
从确定选择器的主题:
例如，下面的选择器表示列表项LI是有序列表OL的唯一子元素: OL > LI:独生子女 但是下面这个表示一个有序列表OL，它有一个唯一的子元素，这个子元素是一个LI: $OL > LI:独生子女 这两个选择器所表示的结构是相同的，但选择器的主题却不同。
编辑:考虑到规范草案是多么的“草案”，最好通过检查CSSWG在选择器级别4上的页面来密切关注这一点。
很多人用jQuery parent来回答，但为了补充这个问题，我想分享一个简短的代码片段，它是我用来向导航中添加类的，这样我就可以为只有子菜单的li添加样式，而不是没有子菜单的li。
$("li ul").parent().addClass('has-sub');
