css - 损坏的 css 代码 - 边框不会被覆盖

Question

所以我遇到了一个以前从未出现过的新问题。

<ul id="mainmenu">
    <li class="mbutton"><a class="currentnav" href="#">Link 1</a></li>
    <li class="mbutton"><a href="#">Link 2</a></li>
    <li class="mbutton"><a href="#">Link 3</a></li>
</ul>

.mbutton a {
    font-family:"Archivo Narrow",Arial, Helvetica, sans-serif;
    font-size:13px;
    display:block;
    margin:0 3px;
    padding:11px 20px 9px 20px;
    color:#404040;
    border: 1px solid #fff;
}
.mbutton a:hover {
    border: 1px solid #000;
}
.currentnav {
    border: 1px solid #e82c3d;
}

令我惊讶的是.currentnav并没有覆盖.mbutton a设置的边框!

我以前从未遇到过这个问题，所以我认为这种方法总是有效的。谁能告诉我如何让它发挥作用吗？

Answer 1

具有较高特异性的样式优先。

由于第一个样式声明为 .mbutton a，因此您需要 .mbutton .currentnav 来覆盖它。