是否有一种方法可以根据类中的子元素的类来选择父元素?这个例子是与我有关的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>.
其他回答
你可以使用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")
“父”选择器
现在，在CSS中没有选择元素父元素的选项(甚至CSS3也没有)。但是对于CSS4，当前W3C草案中最重要的消息是对父选择器的支持。
$ul li:hover{
background: #fff;
}
使用上述方法，当悬停一个列表元素时，整个无序列表将通过添加白色背景来突出显示。
官方文档:https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview(最后一行)。
实际上我遇到了和原来海报上一样的问题。有一个简单的解决方案，只需使用.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');
