CSS更改列表项背景颜色与类

Question

我正在尝试更改一个列表项的背景颜色,而其他列表项有另一种背景颜色.

这就是我所拥有的:

<style type="text/css">
    
ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}
    
    
.selected
{
  background-color:red;
}
   

<ul class="nav">
 <li>Category 1</li>
 <li>Category 2</li>
 <li class="selected">Category 3</li>
 <li>Category 4</li>
</ul>

这产生的是具有蓝色背景的所有列表项(来自"nav"类),就好像没有"选定"类一样.但是,当我从"nav"类中取出背景颜色时,我得到了带有"selected"类的列表项的红色背景.

我想将"选定"类用于页面上的其他项目(即其他列表项,div等).

我该如何解决这个问题？

先感谢您.

Answer 1

这是选择者特异性的问题.(选择器.selected是以下比特定ul.nav li).

要修复,请在覆盖规则中使用与原始规则一样多的特异性:

ul.nav li {
 background-color:blue;
}
ul.nav li.selected {
 background-color:red;
}

ul除非有其他.nav的,否则你也可以考虑使用nixing .所以:

.nav li {
 background-color:blue;
}
.nav li.selected {
 background-color:red;
}

这有点清洁,打字少,位数少.