html - li/ul 中的嵌套 CSS 类

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 block 不在 .我只是为了展示我所拥有的而将代码放在这里。

Answer 1

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