css3：not（）选择器来测试父类的类 [英] css3 :not() selector to test parent's class

问题描述

我有一个无序的列表，使用bootstrapstabs插件。代码如下所示：

I have an unordered list, using bootstraps "tabs" plugin. The code looks like this:

<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 。

I'd like to use CSS3 to change the colour of all the <a> links whose parent <li> DOESN'T have the class .active.

我尝试过这样的操作：

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

，但无效。

推荐答案

组合器如在中不允许使用， + 和子孙空格：not（）在CSS中;它们只允许作为jQuery选择器。您可以在此其他问题中找到更多信息。

Combinators such as >, + and space for descendant aren't allowed within :not() in CSS; they're only allowed as a jQuery selector. You can find out more in this other question.

也就是说，你可以使用：not（） $ c> li ，并移出> a 部分;但这将取决于 ul 和 li 元素的结构：

That said, you may be able to use :not() on the li alone, and move out the > a part; however this will depend on the structure of your ul and li elements:

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

例如，您可以随时链接其他选择器，例如 .span3 如果您想将其限制为一个元素， li 该类只有：

For example, you can always chain other selectors, such as .span3 if you want to limit it to a elements with li parents of that class only:

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

请记住，你只能使用：not（）以这种方式，如果你有控制的标记或结构至少是可预测的（例如，你知道什么样的元素，父母是）。在你的情况下，例如，你只看着 li.span3> a ，并且仅当 li.span3 没有活动类时应用样式。使用此信息，您可以构建一个类似上述选择器之一，应该按预期工作。

Keep in mind, though, that you can only rely on using :not() in this manner if you have control over the markup or the structure is at least predictable (e.g. you know what kind of elements the parents are). In your case for example, you're only looking at li.span3 > a, and applying styles only when the li.span3 does not have the active class. With this information you can construct a selector like one of the above, which should work as expected.

这篇关于css3：not（）选择器来测试父类的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！