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

有没有办法根据类中子元素的类来选择父元素？这个例子与我有关，它通过一个漂亮的菜单插件输出HTML。输出呈现如下所示：

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

活动页


另一页

我的问题是，是否可以将样式应用于包含带有活动类的锚点的列表项。显然，我更喜欢将列表项标记为活动，但我无法控制生成的代码。我可以使用javascript（我想到JQuery）执行这类操作，但我想知道是否有一种方法可以使用CSS选择器来实现这一点

---

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

不幸的是，CSS无法做到这一点

不过，使用JavaScript并不十分困难：

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

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

//JavaScript代码：
document.getElementsByClassName（“活动”）[0].parentNode；
//jQuery代码：
$（'.active'）.parent（）.get（0）；//这将是的父级
。

：

选择器无法上升

CSS无法选择满足特定条件的元素的父元素或父元素。更高级的选择器方案（如XPath）将支持更复杂的样式表。然而，CSS工作组拒绝父选择器建议的主要原因与浏览器性能和增量渲染问题有关

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

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

更新：

允许您选择select的哪个部分是主题：

选择器的主题可以通过前缀显式标识 选择器中某个复合选择器的美元符号（$）。 虽然选择器表示的元素结构是 相同，带或不带美元符号，表示本节中的主题 方法可以更改在该方法中表示主题的复合选择器 结构

示例1:

例如，以下选择器表示列表项LI的唯一子项 有序列表：

OL > LI:only-child

但是，下面的一个表示具有唯一子级的有序列表， 那孩子是李：

$OL > LI:only-child

这两个选择器表示的结构相同， 但选择器的主题不是

---

尽管这在任何浏览器中都不可用（目前，2011年11月），也不能作为jQuery中的选择器使用。

我对Drupal也有同样的问题。考虑到CSS的局限性，实现此功能的方法是在生成菜单HTML时向父元素添加“active”类。在上对此进行了很好的讨论，其结果是，此功能已被引入到nicemenus模块的6.x-2.x版本中。由于该模块仍在开发中，我已将该修补程序向后移植到6.x-1.3 at，以便继续使用该模块的生产就绪版本。

再次迟到，但无论如何，使用jQuery可能会更简洁一些。在我的例子中，我需要为包含在子

中的
标记找到
父标记。jQuery有
：有
选择器，因此可以通过它包含的子项来识别父项（根据@Afrowave的注释ref:更新）：

将选择具有id为someId的子元素的
ul
元素。或者，为了回答最初的问题，应该使用以下类似的方法（未经测试）：

第一稿概述了一种明确设置选择器主题的方法。这将允许OP使用选择器
$li>a.active

发件人：

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

OL > LI:only-child

OL>LI:独生子女

但是，以下表示具有唯一子级的有序列表OL，该子级为LI：

$OL > LI:only-child

$OL>LI:独生子女

这两个选择器表示的结构相同，但选择器的主题不同

编辑：考虑到草案规范的“通风”程度，最好通过检查来关注这一点。
我实际上遇到了与原始海报相同的问题。使用
.parent（）
jQuery选择器有一个简单的解决方案。我的问题是，我使用的是
.parent
而不是
.parent（）
。我知道这是个愚蠢的错误

绑定事件（在这种情况下，由于我的选项卡处于模式，我需要使用
.live
而不是基本的
。单击

$('#testTab1 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab1 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})
$('#testTab2 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab2 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})

这是HTML

<div id="tabView1" style="display:none;">
  <!-- start: the code for tabView 1 -->
  <div id="testTab1" style="width:1080px; height:640px; position:relative;">
    <h1 class="Bold_Gray_45px">Modal Header</h1>
    <div class="tabBleed"></div>
    <ul class="tabs">
      <li class="current"> <a href="#" class="tabLink" id="link1">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-1">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
      <li> <a href="#" class="tabLink" id="link2">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-2">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
    </ul>
  </div>
</div>


模态头


您的选项卡内容




您的选项卡内容





当然你可以重复这个模式。随着更多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;
}    

对于那些想在不使用jquery的情况下使用javascript的人

选择父项很简单。您需要某种类型的
getElementsByClass
函数，除非您可以让drupal插件为活动项分配一个ID而不是类。我提供的函数是从其他天才那里获得的。它工作得很好，只是在调试时请记住，该函数将始终返回一个ID节点数组，而不仅仅是单个节点

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;
}

active\u li=getElementsByClass（“ac
ul * a {
    property:value;
}

ul>li a {
    property:value;
}

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

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

$("li ul").parent().addClass('has-sub');