一个导航的CSS有关问题-HTML教程-爱易网页

一个导航的CSS有关问题

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

一个导航的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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

一个导航的CSS有关问题

相关资料更多>

推荐阅读更多>