是否有一种方法可以根据类中的子元素的类来选择父元素?这个例子是与我有关的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选择器。
为了明确起见，我想对列表项应用样式，而不是锚。
当前回答
你可以使用has():
li:has(a:active) {
/* ... */
}
不幸的是，CSS没有办法做到这一点。
用JavaScript实现并不难:
// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;
// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.
其他回答
这次又迟到了，但是值得的是，使用jQuery可以更简洁一点。在我的例子中，我需要为child <li>中包含的<span>标记找到<ul>父标记。jQuery有:has选择器，所以可以通过它包含的子元素来识别父元素(根据@Afrowave的评论更新，参考:https://api.jquery.com/has-selector/):)
$("ul").has("#someId")
将选择带有id为someId的子元素的ul元素。或者要回答最初的问题，以下内容应该可以达到目的(未经测试):
$("li").has(".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.
实际上我遇到了和原来海报上一样的问题。有一个简单的解决方案，只需使用.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
很多人用jQuery parent来回答，但为了补充这个问题，我想分享一个简短的代码片段，它是我用来向导航中添加类的，这样我就可以为只有子菜单的li添加样式，而不是没有子菜单的li。
$("li ul").parent().addClass('has-sub');
“父”选择器
现在，在CSS中没有选择元素父元素的选项(甚至CSS3也没有)。但是对于CSS4，当前W3C草案中最重要的消息是对父选择器的支持。
$ul li:hover{
background: #fff;
}
使用上述方法，当悬停一个列表元素时，整个无序列表将通过添加白色背景来突出显示。
官方文档:https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview(最后一行)。
