Question

我有一个无序列表，使用bootstraps“tabs”插件。代码如下所示：

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

但无济于事。有没有办法做到这一点，还是我咆哮错误的树？

Answer 1

CSS中>允许+，:not()和后代空间等组合;它们只能作为jQuery选择器使用。您可以在this other question中找到更多信息。

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

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

例如，如果您希望将.span3元素限制为只有a父类的li元素，则可以随时将其他选择器（例如li.span3:not(.active) > a { color: grey; }）链接起来：

:not()

但请记住，如果您可以控制标记或者结构至少是可预测的（例如，您知道父母是哪种元素），那么您只能依赖于以这种方式使用li.span3 > a 。例如，在您的情况下，您只需查看li.span3，并且仅在{{1}}没有活动类时才应用样式。使用此信息，您可以构建一个上述选择器之一，应按预期工作。

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

1 个答案: