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

This is the html code i am using.......

这是我正在使用的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>

and this is the CSS part i am using for the above code...

这是我用于上述代码的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;
}

The Problem is the 'Unaddressed' list item should be displayed in #F00 background color, but it is being displayed in #ADADAD background color, but it is getting the border specified. What is the point i am missing here.?

问题是“未解决”列表项应以#F00背景颜色显示,但它以#ADADAD背景颜色显示,但它正在指定边框。我在这里缺少的是什么?

2 个解决方案

#1

It's because of specificity - when you define the same CSS attribute in two different ways for the same element, the CSS attribute in the more specific selection method is the one applied.

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

#top_options li is more specific than .selected_top_option and so its definition of background-color is the one applied. Think of it this way - there can only be one thing with that id so that is very specific, but there can be many things with that class, so that is less specific. As such, the id wins out.

#top_options li比.selected_top_option更具体,所以它的background-color定义是应用的。可以这样考虑 - 只有一个具有该ID的东西,因此非常具体,但是该类可以有很多东西,因此不那么具体。因此,id胜出。

Based on the linked HTML Dog article (this isn't exactly how specificity is calculated, as it ignores !important for instance, but it's a great quick and easy calculation method), the specificity is:

基于链接的HTML Dog文章(这不完全是如何计算特异性,因为它忽略了!例如重要,但它是一种快速简便的计算方法),特异性是:

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

So in this case, 101 is higher (i.e. more specific) and wins out whenever there's a conflict between these two.

因此,在这种情况下,101更高(即更具体),并且只要这两者之间存在冲突就会胜出。

Another good article on specificty is this Smashing Magazine article and there are plenty more on Google.

关于具体细节的另一篇好文章是Smashing Magazine的一篇文章,谷歌还有很多其他文章。

The solution is to make .selected_top_option more specific. I'd recommend either:

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

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

However, I'd recommend against the !important in most cases, simply because it makes it more complicated to override later.

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

#2

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

#1