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

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.

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

很多人用jQuery parent来回答，但为了补充这个问题，我想分享一个简短的代码片段，它是我用来向导航中添加类的，这样我就可以为只有子菜单的li添加样式，而不是没有子菜单的li。

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

实际上我遇到了和原来海报上一样的问题。有一个简单的解决方案，只需使用.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中没有选择元素父元素的选项(甚至CSS3也没有)。但是对于CSS4，当前W3C草案中最重要的消息是对父选择器的支持。

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

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

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