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

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

为了明确起见，我想对列表项应用样式，而不是锚。

当前回答

根据维基百科:

选择者无法提升 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的选择器。

2008-09-05 10:56:53

其他回答

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

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

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

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

2010-08-10 05:33:40

我刚刚想到的另一个想法可能是一个纯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;
}

2012-02-02 10:50:51

“父”选择器

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

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

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

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

2012-11-22 05:16:22

I had the same problem with Drupal. Given the limitations of CSS, the way to get this working is to add the "active" class to the parent elements when the menu HTML is generated. There's a good discussion of this at http://drupal.org/node/219804, the upshot of which is that this functionality has been rolled in to version 6.x-2.x of the nicemenus module. As this is still in development, I've backported the patch to 6.x-1.3 at http://drupal.org/node/465738 so that I can continue to use the production-ready version of the module.

2009-05-18 12:14:36