我有一个无序的列表,使用引导“标签”插件。代码如下所示:
<ul> <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li> <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li> <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li> <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li> </ul>
我想使用CSS3来改变所有< a>其父< li>的链接没有类.active。
我已经尝试过这样的事情:
a:not(li.active>a){ color:grey; }
但无济于事有没有办法做到这一点,还是跛脚错树?
解决方法
诸如>和后代的组合框不允许在:它们只允许作为一个jQuery选择器。你可以在
this other question找到更多。
也就是说,您可能可以在li上单独使用:not(),并移出>一部分然而这取决于你的ul和li元素的结构:
li:not(.active) > a { color: grey; }
例如,您可以随时链接其他选择器,例如.span3,如果您希望将其限制为仅具有该类的父级的元素:
li.span3:not(.active) > a { color: grey; }
但是,请注意,如果您可以控制标记或结构至少是可预测的(例如,您知道父母是什么样的元素),那么您只能依靠这样使用:not()方法。在你的例子中,你只看li.span3> a,并且只有当li.span3没有活动类时才应用样式。使用这些信息,您可以构建一个如上所述的选择器,它应该按预期工作。