2

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

<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！

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

4

5 回答 5

2

具有更大特异性的样式优先。

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

于 2013-05-13T11:24:56.700 回答
1 
.mbutton .currentnav {
     border: 1px solid #e82c3d;
}
于 2013-05-13T11:23:04.207 回答
1

未应用您的覆盖，因为.currentNav它的选择器比.mbutton a.

请参考W3 的文档：

选择器的特异性计算如下：

  • 负选择器的计数与它们的简单选择器参数一样
  • 计算选择器中 ID 属性的数量 (= a)
  • 计算选择器中其他属性和伪类的数量（= b）
  • 计算选择器中元素名称的数量（= c）
  • 忽略伪元素。

连接三个数字 abc（在具有大基数的数字系统中）给出了特异性。

例子

一些例子：

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

另一个很酷的参考资料会有所帮助（如果你是星球大战的粉丝）。

于 2013-05-13T11:29:03.233 回答
0

改变

.currentnav {
    border: 1px solid #e82c3d;
}

至

.mbutton .currentnav {
    border: 1px solid #e82c3d;
}
于 2013-05-13T11:23:44.053 回答
0

给你... http://jsfiddle.net/gcvbJ/

答案是将 .mbutton 添加到 .currentnav 声明中，因此：

.mbutton .currentnav {
    border: 1px solid #e82c3d;
}
于 2013-05-13T11:24:38.360 回答