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

我尝试更改一个列表项的背景颜色,而另一个列表项的另一个背景颜色.

这是我有的：

<style type="text/css">

ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}


.selected
{
  background-color:red;
}

</style>


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

所产生的是具有蓝色背景的所有列表项(从“nav”类),就好像没有“selected”类.但是,当我从“nav”类中取出背景颜色时,我将获得带有“selected”类的列表项的红色背景.

我想为页面上的其他项目(即其他列表项,div等)使用“所选”类.

我该如何解决这个问题？

先谢谢你.

解决方法

这是一个 selector specificity的问题(选择器.selected比ul.nav li更具体)

要解决,在最初的规则中使用与原文一样多的特异性：

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

你也可以考虑修改ul,除非有其他的.navs.所以：

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

这更干净,打字少,位少.