详解CSS中的选择器优先级及样式层叠问题解决

一. 新手的疑问
大家经常在网页中看到类似 li#first 这样的选择器。很多新手疑问了？由于使用 id 就已经可以确定元素了，为什么前面还要加一个 li？ 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错，简单测试一下也没有问题。
可是，我们经常看到带有元素名称的选择器，例如，在微软的项目模板中就有大量的带有元素名称的选择器，如果没有用的话，为什么要这样写呢？哈哈哈，这么写是有原因的，下面就带大家一起看一下！

</div>

1. ul#navlist   
2. {   
3.     float: rightright;   
4. }   
5. ul#navlist li   
6. {   
7.     display: inline;   
8. }  

</div> </div>

二. 问题出现了
写一个简单的菜单，使用 ul 和 li 实现，菜单项之间使用边框来实现间隔线。
html 代码如下：

</div>

1. <ul id="navlist">  
2.     <li class="first"><a href="/" id="current">Home</a></li>  
3.     <li><a href="#">Store</a></li>  
4.     <li><a href="#">ShoppingCart</a></li>  
5.     <li><a href="#">Admin</a></li>  
6. </ul>  

</div> </div>

使用下面的样式表，首先通过为所有的超级链接增加一个左边框来画出间隔的虚线，然后将第一个菜单项的左边框去掉，我的第一个样式使用了 .first a。

</div>

1. ul#navlist li   
2. {   
3.     display: inline;   
4. }   
5. ul#navlist li a   
6. {   
7.     border-left: 1px dotted #8A8575;   
8.     padding: 10px;   
9.     margin-top: 10px;   
10.     color: #8A8575;   
11.     text-decoration: none;   
12.     float: left;   
13. }   
14. .first a   
15. {   
16.     border: none;   
17. }  

</div> </div>

看一下效果，完全没有反应。

还有的地方说 id 选择器的级别比较高，那么将类改成 id 。

</div>

1. <li