活动孩子的父母的复杂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）来执行这类事情，但我想知道是否有办法使用 CSS 选择器来做到这一点。

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

Answer 1

According to Wikipedia:

选择器无法上升

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

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

更新：

Selectors Level 4 Spec 允许您选择选择的哪一部分是主题：

选择器的主题可以通过前置显式标识 选择器中的复合选择器之一的美元符号 ($)。 虽然选择器所代表的元素结构是 相同的有或没有美元符号，表明本主题 方式可以更改哪个复合选择器代表该主题 结构。

示例 1：

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

OL > LI:only-child

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

$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 可以更简洁一些。在我的情况下，我需要为子 <li> 中包含的 <span> 标签找到 <ul> 父标签。 jQuery 具有:has 选择器，因此可以通过它包含的子代来识别父代（根据@Afrowave 的评论更新：https://api.jquery.com/has-selector/）：

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

将选择具有 ID 为 someId 的子元素的 ul 元素。或者要回答最初的问题，类似以下内容应该可以解决问题（未经测试）：

$("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

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

设置列表元素的样式

来自Determining the Subject of a Selector：

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

OL > LI:only-child

但是下面的一个表示一个有序列表 OL 有一个唯一的孩子，那个孩子是一个 LI：

$OL > LI:only-child

这两个选择器所代表的结构是一样的，但是选择器的主题不同。

编辑：鉴于规范草案的“草稿”程度，最好通过查看CSSWG's page on selectors level 4 来密切关注这一点。

Answer 6

CSS4 选择器的未来答案

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

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

这个上的browser support这个时候基本没有，但是official specs上的在考虑中。

---

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，以及只包含一个带有活动类的锚的子列表项。

Answer 7

我在使用 Drupal 时遇到了同样的问题。鉴于 CSS 的限制，实现此功能的方法是在生成菜单 HTML 时将“活动”类添加到父元素。 http://drupal.org/node/219804 对此进行了很好的讨论，其结果是该功能已被纳入 nicemenus 模块的 6.x-2.x 版本。由于这仍在开发中，我已将补丁程序向后移植到 http://drupal.org/node/465738 的 6.x-1.3，以便我可以继续使用该模块的生产就绪版本。

Answer 8

许多人回答jQuery parent，但为了补充一点，我想分享一个快速的 sn-p 代码，用于向我的导航添加类，以便我可以向 li 的添加样式只有子菜单而没有li 的子菜单。

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

Answer 9

我实际上遇到了与原始海报相同的问题。有一个简单的解决方案，只使用.parent() jQuery 选择器。我的问题是，我使用的是.parent 而不是.parent()。愚蠢的错误我知道。

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

$('#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

Answer 10

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