Question

我有一个无序列表，其中每个<li>都有不同的ID和白色背景。现在，当id = me（<li id="me">）时，它应该将背景颜色更改为红色而不是白色。

请看我的小提琴：http://jsfiddle.net/mauricederegt/s2dHJ/

我试过了：

#overview li, #me {
blabla
}
#me {
    background-color: #FF0000;
}

和

#overview li, #me li {
blabla
}
#me li{
    background-color: #FF0000;
}

等，但没有工作

希望有一个解决方案。

亲切的问候，

Answer 1

像这样写：

#overview #me {
    background-color: #FF0000;
}

因为权力#overview li多于#me。因此，对于覆盖，我们必须像这样定义#overview #me。

选中此http://jsfiddle.net/s2dHJ/2/

Answer 2

试试这个：

#me {
    background-color: #FF0000 !important;
}

请参阅here

即使我不建议使用!important，您似乎也有其他样式覆盖您想要的风格。修复所有样式，使它们继承您想要的样式，或者如图所示强制它。

Answer 3

给div容器一个类而不是id。 ID比CSS中的类要严格得多。因此，ID会覆盖其继承类的属性。

<div class="overview">
    <ul>
        <li id="1234">
             This one should have a WHITE bg    
        </li>
        <li id="me">
             This one should have a RED bg    
        </li>
        <li id="567">
            This one should have a WHITE bg    
        </li>
    </ul>
</div>


.overview {
   padding-top: 30px;
   background-color: #2daebf;
   height: 468px;
   width: 182px;
}
.overview li {
   list-style: none;
   float: left;
   width: 160px;
   padding: 3px;
   background-color: #FFF;
   border-radius: 3px;
   margin: 0 7px 3px 7px;
}

如果<li>具有特定ID </li>，则无法更改背景颜色

3 个答案: