id 的选择器为什么要这么写 li#first？
一. 一个疑问？
看到过一篇关于 CSS 的文章，其中说到：对于类似 li#first 这样的选择器，由于使用 id 就已经可以确定元素了，没有必要再写上前面的 li, 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错，简单测试一下也没有问题。
可是，我们经常看到带有元素名称的选择器，例如，在微软的项目模板中就有大量的带有元素名称的选择器，如果没有用的话，为什么要这样写呢？
复制代码
ul#navlist
{
float: right;
}
ul#navlist li
{
display: inline;
}
二. 问题出现了！
写一个简单的菜单，使用 ul 和 li 实现，菜单项之间使用边框来实现间隔线。
html 代码如下：
复制代码
<ul id=”navlist”>
<li class=”first”><a href=”/” id=”current”>Home</a></li>
<li><a href=”#”>Store</a></li>
<li><a href=”#”>ShoppingCart</a></li>
<li><a href=”#”>Admin</a></li>
</ul>
使用下面的样式表，首先通过为所有的超级链接增加一个左边框来画出间隔的虚线，然后将第一个菜单项的左边框去掉，我的第一个样式使用了 .first a。
复制代码
ul#navlist li
{
display: inline;
}
ul#navlist li a
{
border-left: 1px dotted #8A8575;
padding: 10px;
margin-top: 10px;
color: #8A8575;
text-decoration: none;
float: left;
}
.first a
{
border: none;
}
看一下效果，完全没有反应。
还有的地方说 id 选择器的级别比较高，那么将类改成 id 。
复制代码
<li id=”first”><a href=”/” id=”current”>Home</a></li>
将样式表也进行相应的修改。
复制代码
#first a
{
border: none;
}
可是结果呢？岿然不动！
用火狐的 firebug 看一看，被忽略了。
三. 探源
为什么我的样式被秒杀了？
网上有大量的文章，但是说法并不一致，有的说要考虑三个级别，可是也有的说需要考虑四个级别，但是总的方向大致是关于层叠的。
不如到 W3C 的网站上看一个究竟。相关的标准在 这个页面 可以看到，目前为止的 CSS 标准有三个: CSS1, CSS2, 以及 CSS3。
