Question

我有一个嵌套的li，他们有特定的类。我遇到嵌套类的问题。尽管有特定的类，但样式是父类的类型：

<ul>    
<li class="navtitle-current"><a href="1.html">ONE</a>
    <ul>
    <li class="navtitle-current"><a href="2.html">TWO</a></li>
    <li class="navtitle"><a href="3.html">THREE</a></li>
    </ul>
    </li>
</ul>

.navtitle {
    font-weight: none;
}

.navtitle a{
    background-color:white;
    color: gray;
}

.navtitle a:hover,
.navtitle:hover{
    background-color:white;
    color: black;
}

.navtitle-current {
    font-weight: none;
}

.navtitle-current a{
    background-color:white;
    color: black;
}

.navtitle-current a:hover,
.navtitle-current:hover{
    background-color:white;
    color: black;
}

我想要发生的是，一个需要是黑色，两个是黑色，三个是灰色。但是，所有链接都是黑色的。

我的印象是，如果我明确地上课，我不应该有任何这样的问题。有没有人有任何想法？

感谢所有帮助。

注意：我意识到CSS块不在。我只是为了展示我所拥有的东西而把代码放在这里。

Answer 1

由于.navtitle-current的级别高于.navtitle，因此链接将继承.navtitle-current a个样式。如果您想在其中设置链接样式，则需要更具体地使用标记。将.navtitle a更改为.navtitle-current .navtitle a，它应该有效。

Answer 2

问题是选择器特异性 - 你的倒数第二个声明有the same exact same weight and origin作为定义灰色文本的类 - .navtitle a - 并且由于级联的性质，后面的规则将指定赢

来自2.1 Spec, Specificity：

最后，按指定顺序排序：如果两个声明具有相同的权重，来源和特异性，则后者指定获胜。导入样式表中的声明被认为是在样式表本身中的任何声明之前。

要克服这个问题，只需在课程前加.navtitle a即可提高li的特异性，例如

 li.navtitle a {
 background-color: gray;
 color: gray;
 }

Example

Answer 3

你可以做得更聪明：

<div class="titles">
  <ul>  
    <li class="current"><a href="1.html">ONE</a>
      <ul>
        <li class="current"><a href="2.html">TWO</a></li>
        <li><a href="3.html">THREE</a></li>
      </ul>
    </li>
  </ul>
</div>

.titles ul li {...}
.titles ul li.current {...}
.titles ul li.current ul li {...}
.titles ul li.current ul li.current {...}

的问候，

Answer 4

另一种解决方法：

<强> jsFiddle

.navtitle-current .navtitle  a  {
    background-color:white;
    color: gray; 
}

这可能只是个人偏好，但在可能的情况下，我会尽量避免链接等等。我觉得使用类名更具可读性。

li / ul中的嵌套CSS类

4 个答案: