复杂的CSS选择父母的活动的孩子[重复]

StackOverflow https://stackoverflow.com/questions/45004

  •  09-06-2019
  •  | 
  •  

题

这个问题已经有一个答案在这里：

有没有办法选择父元的基础上课的儿童元中的课吗？例子，是有关我关于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。

这不是很困难的JavaScript：

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

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

其他提示

根据Wikipedia:

选择都无法登

CSS提供无法选择父母或祖先的元素，满足某些标准。一个更高级的选择方案(例如XPath)将启用更复杂的样式表。然而，主要原因CSS工作组拒绝建议对父母的选择有关浏览器的性能和递增呈现的问题。

和任何人在寻找这么在未来，这也可能会被称为一个祖先选择。

更新：

的 选择4级的规范 允许你选择的哪个部分选择的主题：

受试者的选择可以明确识别的通过加上 一美元sign($)的一个化合物选择中的一种选择。虽然元素结构的选择表示是的 同样的或者不美元的标志，表明该议题在这 方式可以改变其化合物的选择表示问题在于 结构。

实例1：

例如，以下选择代表的一个列表中的项目李独特的孩子的 一个有序列OL：

OL > LI:only-child

但是下面的一个表示的有序列表OL具有独特的孩子， 那个孩子被一个李：

$OL > LI:only-child

该机构代表通过这两个选择是相同的， 但该科目的选择都没有。

虽然这不是可以(目前，2011年)中的任何浏览器或作为选择在！

迟到的该缔约方再次但是对于它的价值可使用jQuery是一个小小的更简洁。在我的情况下，我需要找到的 <ul> 父母的标记 <span> 标记包含在孩子 <li>.jQuery有 :has 选择使它能够确定父母的儿童它包含(更新每@Afrowave的意见ref： https://api.jquery.com/has-selector/):

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

将会选择 ul 元素具有一个孩子元件的id someId.或者回答的问题，就像以下应该做的伎俩(未经测试):

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

"父母"选择

现在，没有选择父母中一个元素CSS(甚至不CSS3).但与 CSS4, 最重要新闻在当前W3C草案是支持的父母选择。

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

使用上文所述，在徘徊的一个单元，整个排序的名单将突出显示通过增加一个白色的背景。

官方文件： https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview (last row)。

第一个草案， 选择4级 概述一种方法明确设置的 受 一个选择。这将允许运风格的清单元的选择 $li > a.active

从 确定的主题的选择:

例如，以下选择代表的一个列表中的项目李独特的孩子的序列表OL：

OL > LI:only-child

但是下面的一个表示的有序列表OL具有一个独特的儿童，即儿童是一个李：

$OL > LI:only-child

该机构代表通过这两个选择是相同的，但该科目的选择都没有。

编辑：鉴于"通风"草案的规格可能，最好保持标签上通过检查 CSSWG的页面上选择等级4.

未来的答案CSS4选择

新的CSS前包含一个实验 :has 伪的选择，可能能够做这件事情。

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

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

答案在2012年，这是错误的，在2012年及更是错误的，在2018

当它是真实的CSS不能提升，这是不正确，你不能抓住的父元另一个元素。让我重申：

用你HTML例码，你能够抓住李没有指定李

ul * a {
    property:value;
}

在这个例子中，ul是父母中的一些元素和元素是父母的锚点。下使用这种方法是，如果有一个ul有任何儿童元，其中包含一个锚，它将继承的风格规定。

你也可以使用儿童的选择，以及因为只有到指定的父元。

ul>li a {
    property:value;
}

在这个例子中，锚必须为后代的一个李必须是一个孩子的ul，这意味着它必须在树下的ul宣言》。这将是一个更具体的，只会抓住一个列表中的项目，其中包含一个锚和一个孩子的ul。

所以回答你的问题通过代码。

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

这应该抓住ul类的菜单，并将儿童列项目只包含一个锚与这类活动。

我有同样的问题与推.鉴于限制CSS的方式得到这个工作是添加"积极"类父元素菜单时HTML产生。有一个良好的讨论，这在 http://drupal.org/node/219804, ，结果是，这个功能已卷，第6版。x-2.x的nicemenus模块。作为这个仍然在发展，我已经移植补丁至6。x-1.3在 http://drupal.org/node/465738 这样我可以继续使用生产的模块。

许多人回答 jQuery 父母，而只是再加上，我想分享的快速段代码，我在使用，用于加班我的星导航系统所以我可以添加的造型 li's只有子菜单和没有 li's，不。

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

实际上我碰到了同样的问题，因为原来的海报。有一个简单的解决办法只是使用 .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>

当然你可以重复的模式有更多的李

另一个认为，发生在我刚才可能是一个纯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 功能的一种，除非可以获得您的推插件分配活动项目的一个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;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top