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

因此，我遇到了从未有过的新问题。

<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设置的边框！

我从来没有遇到过这个问题，所以我认为这种方式一直有效。谁能告诉我如何使其工作？

最佳答案

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

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