Question

这是我正在使用的HTML代码.......

<ul id="top_options">
<li>Discussions</li> 
<li>Tags</li> 
<li>Users</li>
<li class="selected_top_option">Unaddressed</li> 
<li>New Discussion</li> </ul>

这是我用于上述代码的CSS部分......

#top_options
{
    display:inline;
    float:left;
}
#top_options li
{
    list-style:none;
    display:inline;
    margin-right:20px;
    background-color:#ADADAD;
    color:#FFF;
    font-size:16px;
    font-weight:bold;
    line-height:50px;
    padding-left:8px;
    padding-right:8px;
    font-family:Arial, Helvetica, sans-serif;
}
#top_options li:hover
{
    background-color:#FF8000;
    cursor:pointer;
}
.selected_top_option
{
    background-color:#F00;
    border:dotted;
}

问题是“未解决”列表项应以＃F00背景颜色显示，但它以#ADADAD背景颜色显示，但它正在指定边框。我在这里错过了什么。？

Answer 1

这是因为specificity - 当您为同一元素以两种不同的方式定义相同的CSS属性时，更具体的选择方法中的CSS属性是应用的。

#top_options li比.selected_top_option更具体，所以background-color的定义是应用的。以这种方式思考 - id只能有一个东西，因此非常具体，但class可能有很多东西，所以不太具体。因此，id胜出。

基于linked HTML Dog article（这不是完全如何计算特异性，因为它忽略了!important，但它是一种快速简便的计算方法），具体是：

.selected_top_option = 10 (1 class selector)
#top_options li = 101 (1 id selector + 1 element selector)

所以在这种情况下，101更高（即更具体），并且只要这两者之间存在冲突就会胜出。

关于具体情况的另一篇好文章是this Smashing Magazine article，Google上还有很多其他文章。

解决方案是使.selected_top_option更具体。我建议：

#top_options li.selected_top_option { /* your css here */ } 
.selected_top_option { background-color: #F00 !important; /* rest of css */ }

但是，在大多数情况下，我建议不要使用!important，因为它会使以后覆盖更加复杂。

Answer 2

.selected_top_option
{
    background-color:#F00 !important;
    border:dotted;
}

样式设置时，颜色不会更改为特定的类项目

2 个答案: