css3：not（）选择器测试父类

我有一个无序列表，使用bootstraps“tabs”插件。代码如下所示：css3：not（）选择器测试父类

<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; 
}

，但无济于事。有没有办法做到这一点，或我吠叫错误的树？

来源

2013-01-10 Jascination

当前CSS没有“父”seletor（尽管CSS4显然会有这种能力），所以你可能想要寻找另一个解决方案 –

那么这只是烦人的！我想我可以应用一种特殊的风格来覆盖常规的'a'风格，但我更喜欢如果我能找到父类。好吧！ – Jascination

@Explosion Pills：这里的代码不是试图选择父代;它试图根据父匹配（或不匹配）选择一个孩子。这不能用父母选择器来解决。 – BoltClock

组合器如>,+和后代空间不允许在:not()在CSS中;他们只被允许作为jQuery选择器。你可以在this other question找到更多。

也就是说，您可以在li上单独使用:not()，然后移出> a部分;然而，这将取决于你的ul和li元素的结构：

li:not(.active) > a { 
    color: grey; 
}

例如，你可以随时连接其他的选择，比如.span3，如果你想将它与li父母类的限制a元素只：

li.span3:not(.active) > a { 
    color: grey; 
}

请记住，虽然，你只能靠这种方式使用:not()，如果你有控制权的标记或结构至少可预见的（例如，你知道父母是什么样的元素）。举例来说，你只看li.span3 > a，并且只在li.span3没有活动类时才应用样式。有了这些信息，你可以构建一个像上面的选择器，其中应该按预期工作。

来源

2013-01-10 05:59:51 BoltClock

css3：not（）选择器测试父类

回答

相关问题