活动子的父级的复杂CSS选择器

Question

有没有办法根据类中子元素的类选择父元素？与我相关的示例与http://drupal.org的精美菜单插件的HTML输出相关.输出呈现如下:

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

我的问题是,是否可以将样式应用于包含具有活动类的锚的列表项.显然,我更喜欢将列表项标记为活动,但我无法控制生成的代码.我可以使用javascript(JQuery spring to mind)执行此类操作,但我想知道是否有使用CSS选择器的方法.

为了清楚起见,我想将一个样式应用于列表项,而不是锚.

Answer 1

根据维基百科:

选择者无法提升

CSS无法选择满足特定条件的元素的父元素或祖先元素.更高级的选择器方案(例如XPath)将启用更复杂的样式表.但是,CSS工作组拒绝父选择器提案的主要原因与浏览器性能和增量渲染问题有关.

对于将来搜索SO的任何人来说,这也可能被称为祖先选择器.

更新:

该选择器4级规格,您可以选择其中选择的部分是主题:

选择器的主题可以通过在选择器中的一个复合选择器前加一个美元符号($)来明确地识别.尽管选择器表示的元素结构与美元符号相同或不相同,但以这种方式指示主题可以更改哪个复合选择器表示该结构中的主题.

例1:

例如,以下选择器表示有序列表OL的列表项LI唯一子项:

OL > LI:only-child

然而,下面的代表一个有一个唯一孩子的有序列表OL,该孩子是LI:

$OL > LI:only-child

由这两个选择器表示的结构是相同的,但选择器的主体不是.

虽然这在任何浏览器中都不可用(目前,2011年11月),或者作为jQuery中的选择器.

Answer 2

不幸的是,没有办法用CSS做到这一点.

但是使用JavaScript并不是很困难:

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

Answer 3

迟到了派对,但是为了它的价值,可以使用jQuery更简洁一些.在我的情况下,我需要找到孩子中包含<ul>的<span>标签的父标签<li>.jQuery具有:has选择器,因此可以通过它包含的子节点识别父节点(根据@ Afrowave的注释ref:https://api.jquery.com/has-selector/更新):

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

将选择ul具有id为someId的子元素的元素.或者回答原始问题,类似下面的内容应该可以做到(未经测试):

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

Answer 4

"父母"选择者

现在,没有选择在CSS中选择元素的父元素(甚至不是CSS3).但是对于CSS4,当前W3C草案中最重要的新闻是对父选择器的支持.

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

使用上面的内容,当悬停列表元素时,将通过向其添加白色背景来突出显示整个无序列表.

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

Answer 5

选择器级别4的初稿概述了一种显式设置选择器主题的方法.这将允许OP使用选择器设置list元素的样式$li > a.active

从确定选择器的主题:

例如,以下选择器表示有序列表OL的列表项LI唯一子项:

OL > LI:only-child

然而,下面的代表一个有一个唯一孩子的有序列表OL,该孩子是LI:

$OL > LI:only-child

由这两个选择器表示的结构是相同的,但选择器的主体不是.

编辑:鉴于规范草案的"草率"如何,最好通过检查4级选择器上的CSSWG页面来关注这一点.

Answer 6

CSS4 选择器的未来答案

新的 CSS 规范包含一个实验性的:has伪选择器，它可能能够做到这一点。

li:has(a:active) {
  /* ... */
}

该浏览器支持在这基本上是在这个时候不存在的，但考虑到对官方的规格。

2012 年的答案 2012 年错了，2018 年更错了

虽然 CSS 确实不能 ASCEND，但不能抓取另一个元素的父元素是不正确的。让我重申：

使用您的 HTML 示例代码，您可以在不指定 li 的情况下获取 li

ul * a {
    property:value;
}

在这个例子中，ul 是某个元素的父元素，而那个元素是锚点的父元素。使用此方法的缺点是，如果 ul 包含任何包含锚点的子元素，它将继承指定的样式。

您也可以使用子选择器，因为无论如何您都必须指定父元素。

ul>li a {
    property:value;
}

在这个例子中，锚点必须是 li 的后代，而 li 必须是 ul 的孩子，这意味着它必须在 ul 声明之后的树中。这将更具体一点，并且只会抓取包含锚点并且是 ul 的子项的列表项。

所以，用代码回答你的问题。

ul.menu > li a.active {
    property:value;
}

这应该获取具有菜单类的 ul，以及仅包含具有活动类的锚点的子列表项。