是否有一种方法可以根据类中的子元素的类来选择父元素?这个例子是与我有关的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类的锚的子列表项。

其他回答

你可以使用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>.

未来答案与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类的锚的子列表项。

这次又迟到了,但是值得的是,使用jQuery可以更简洁一点。在我的例子中,我需要为child <li>中包含的<span>标记找到<ul>父标记。jQuery有:has选择器,所以可以通过它包含的子元素来识别父元素(根据@Afrowave的评论更新,参考:https://api.jquery.com/has-selector/):)

$("ul").has("#someId")

将选择带有id为someId的子元素的ul元素。或者要回答最初的问题,以下内容应该可以达到目的(未经测试):

$("li").has(".active")

Selectors Level 4的初稿概述了显式设置选择器主题的方法。这将允许OP使用选择器$li > a.active对列表元素进行样式化

从确定选择器的主题:

例如,下面的选择器表示列表项LI是有序列表OL的唯一子元素: OL > LI:独生子女 但是下面这个表示一个有序列表OL,它有一个唯一的子元素,这个子元素是一个LI: $OL > LI:独生子女 这两个选择器所表示的结构是相同的,但选择器的主题却不同。

编辑:考虑到规范草案是多么的“草案”,最好通过检查CSSWG在选择器级别4上的页面来密切关注这一点。

“父”选择器

现在,在CSS中没有选择元素父元素的选项(甚至CSS3也没有)。但是对于CSS4,当前W3C草案中最重要的消息是对父选择器的支持。

$ul li:hover{
    background: #fff;
}

使用上述方法,当悬停一个列表元素时,整个无序列表将通过添加白色背景来突出显示。

官方文档:https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview(最后一行)。