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