1. 爱易网页
  2. HTML教程
  3. 一个导航的CSS有关问题

一个导航的CSS有关问题

日期：2014-05-17　 浏览次数：20705 次

一个导航的CSS问题
<!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;}这样就没有效果？

------解决方案--------------------
我看浏览器的顺序是这样的：
element.sytle{ }
#nav li a#current
#nav li a
#current


相关资料更多>

  1. CSS 轨范书写顺序
  2. html radio 默许选中
  3. Codrops 优秀课程：基于 CSS3 的全屏网页过渡特效
  4. JQuery写出的.Dialog在IE和Firefox上显示大小不一致
  5. 分享一个HTML5画布兑现的超酷文字弹跳球效果
  6. frameset在IE9里面没有高度了解决思路
  7. easy ui 的linkbutton式样
  8. 这个CSS怎么写
  9. Cache有关问题