我尝试更改一个列表项的背景颜色,而另一个列表项的另一个背景颜色.
这是我有的：
<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;
}
这更干净,打字少,位少.
