详解CSS中的挑选器优先选择级及款式堆叠难题处

1. 初学者的疑惑
大伙儿常常在网页页面中看到相近 li#first 这样的挑选器。许多初学者疑惑了？因为应用 id 就早已能够明确元素了，为何前面还要加1个 li？ 立即写上 #first 这样的 id 挑选器便可以了。听起来讲得非常好，简易检测1下也沒有难题。
但是，大家常常看到带有元素名字的挑选器，比如，在微软的新项目模版中就有很多的带有元素名字的挑选器，假如沒有用的话，为何要这样写呢？哈哈哈，这么写是有缘故的，下面就带大伙儿1起看1下！

2. 难题出現了
写1个简易的菜单，应用 ul 和 li 完成，菜单项之间应用边框来完成间距线。
html 编码以下：

应用下面的款式表，最先根据为全部的非常连接提升1个左侧框来画出间距的虚线，随后将第1个菜单项的左侧框去掉，我的第1个款式应用了 .first a。

看1下实际效果，彻底沒有反映。

也有的地区说 id 挑选器的级別较为高，那末将类改为 id 。

将款式表也开展相应的改动。

但是結果呢？屹立不倒！

用火狐的 firebug 看1看，被忽视了。

3. 缘故
为何我的款式被秒杀了？
在网上有很多的文章内容，可是说法其实不1致，有的说要考虑到3个级別，但是也是有的说必须考虑到4个级別，可是总的方位大概是有关堆叠的。
比不上到 W3C 的网站上看1个到底。有关的规范在 这个网页页面 能够看到，现阶段为止的 CSS 规范有3个: CSS1, CSS2, 和 CSS3。
CSS1 是最开始的规范，在其中有关堆叠次序的叙述在 这里，还出示了1个简易的示例开展表明。

在 CSS1 中将优先选择级分成3组，将 id 挑选器做为 a 组，类挑选器做为 b 组，元素名做为 c 组，每组中出現1次，计数1次，依照先 a 组开展较为，同样的状况下，应用 b 组开展较为，最终是 c 组。甚么挑选器的优先选择级別高，甚么挑选器出示的款式合理。例如在上面的事例中，第 5 组应用 id 的级別最高，因此，这组的款式设定起效，而别的的设定可能被忽视掉。
CSS21 规范
在 CSS2 中，又提升了有关行内表明 style 的组，因此参加较为的构成以便 4 组，在其中 style 的优先选择级別最高。一样，在 CSS2 的规范表明中也出示了样例。

在这个示例中，style 的优先选择级別最高，因此可能遮盖掉根据 id 开展的设定，色调为翠绿色。

4. 处理难题
根据上面的剖析能够看到，仅仅出示挑选器其实不足以可以起效，还要看挑选器的优先选择级別，在大家的难题中，即便应用 id 来挑选第1个菜单项：#first a ，包含了1个 id 和1个元素名，那末所得的优先选择级別为：
a=0, b=1, c=0, d=1
但是，通用性的挑选器是这样的：ul#navlist li a，优先选择级中却包含了1个 id, 也有 3 个元素名字，因此优先选择级別为：
a=0, b=1, c=0, d=3
因此大家的挑选器沒有比过通用性的挑选器，不幸产生了！
了解了缘故，难题也就简易了，提升大家挑选器的优先选择级別，超出通用性挑选器的优先选择级便可以了，例如，大家能够写成这样：
ul#navlist li#first a
如今的优先选择级是是多少呢？
a=0, b=2, c=0, d=3
在 b 组较为的情况下就早已超出了，看看是不是早已取得成功了！果真取得成功了，以下！

还能够再加关键性表明，还可以处理。!important 务必写在款式与分号之间，每一个款式务必独立申明。这个还可以用来调剂适配性难题，IE6不鉴别!important;话说回家，适配难题最好是還是用hack方式处理较为好！

5. 总结
根据上面的叙述，不知道道大伙儿针对挑选器的权重有了1定的掌握沒有。了解挑选器的权重，能够更好的操纵款式，用权重高的款式去遮盖掉那些权重低的款式！了解css的这1点，很关键！