0

我有一个嵌套的 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 块不在 . 我只是把代码放在这里是为了展示我所拥有的。

4

4 回答 4

2

因为.navtitle-current比 更高级别.navtitle，所以链接继承了.navtitle-current a样式。如果要在其中设置链接样式，则需要更具体地使用标签。更改.navtitle a为.navtitle-current .navtitle a它应该可以工作。

于 2013-05-21T19:45:00.623 回答
1

问题在于选择器的特异性——倒数第二个声明与定义灰色文本的类具有完全相同的权重和来源.navtitle a——并且由于级联的性质，指定的后一个规则将获胜

从2.1 规范，特异性：

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

为了克服这个问题，只需.navtitle a通过li在课程之前加入来增加特异性，例如

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

例子

于 2013-05-21T19:40:19.130 回答
1

你可以做得更聪明：

<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 {...}

问候，

于 2013-05-21T19:48:33.063 回答
1

解决此问题的另一种方法：

jsFiddle

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

这可能只是个人喜好，但如果可能的话，我会尽量避免链接 ul li ul li 等。我发现使用类名更具可读性。

于 2013-05-21T19:52:59.660 回答