是否有一种方法可以根据类中的子元素的类来选择父元素?这个例子是与我有关的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选择器。
为了明确起见,我想对列表项应用样式,而不是锚。
未来答案与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类的锚的子列表项。
实际上我遇到了和原来海报上一样的问题。有一个简单的解决方案,只需使用.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