Home >Web Front-end >HTML Tutorial >一个导航的CSS问题_html/css_WEB-ITnose
一个导航的CSS问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:43:25995browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">#nav {list-style-type: none;}#nav li {float: left;}#nav li a {font-size: 14px;text-decoration: none;background-color: #FFFFCC;display: block;width: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}#nav li a:hover {background-color: #FF0000;}#nav li a#current {background-color: #00FF00;}</style></head><body><ul id="nav"> <li><a id="current" href="#">百度</a></li> <li><a href="#">百度</a></li> <li><a href="#">新浪</a></li></ul></body></html> 这样的一个导航，为什么我把#nav li a#current {background-color: #00FF00;}这段改写成#current {background-color: #00FF00;}这样就没有效果？
http://www.w3cn.org/article/translate/2005/104.html这里有CSS的技巧，里面有说到
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
为什么我把#nav li a#current {background-color: #00FF00;}这段改写成#current {background-color: #00FF00;}这样就没有效果？
回复讨论(解决方案)
调试了一下，结果是
当写法是#current {background-color: #00FF00;}的时候，则
#nav li a {font-size: 14px;text-decoration: none;background-color: #FFFFCC;display: block;width: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}
样式里面的background-color属性，覆盖了，#current样式里的属性设置。
当写法是#nav li a#current {background-color: #00FF00;}的时候，则是
#nav li a#current这个样式，覆盖了，#nav li a样式里的属性值。
具体是什么原因会这样，不清楚呀。
等待大神，回复。
看着可能是跟，浏览器加载样式的，先后顺序有关。
调试了一下，结果是
当写法是#current {background-color: #00FF00;}的时候，则
#nav li a {font-size: 14px;text-decoration: none;background-color: #FFFFCC;display: block;width: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}
样式里面的background-color属性，覆盖了，#current样式里的属性设置。
当写法是#nav li a#current {background-color: #00FF00;}的时候，则是
#nav li a#current这个样式，覆盖了，#nav li a样式里的属性值。
具体是什么原因会这样，不清楚呀。
等待大神，回复。
按优先级别来讲，应该#current是最高级的吧，怎么它的属性会被覆盖呢？
我看浏览器的顺序是这样的：
element.sytle{ }
#nav li a#current
#nav li a
#current
嗯。。是优先级别的问题，谢谢了
嗯。。是优先级别的问题，谢谢了
那就结帖，给分吧、、、