css结构和重叠之选择器的特殊性

在使用css对html文档声明样式的时候，一般情况（即不考虑用户进行样式设置，只考虑开发者和用户代理-浏览器-）下，页面样式最终的体现是开发者所写的样式和浏览器默认样式的最终合作结果。实际上，从比较浅的层次来讲的话，用户代理的样式无需考虑在内，一是因为用户代理的样式一般是display之类的基本样式，而并非网页中最具有展现意义的color、float等样式；二则是因为用户代理的样式与开发者的样式相比较，总是后者优先。

因此，在基本的hml文档中样式的处理上（常规情况下），把页面内嵌，内联和外链的样式搞清楚基本上就可以比较好的展示网页了。

在这种常规情况下，对于css样式的声明，就会有一个问题，即选择器的特殊性（如下所示）：使用不同的选择器选取到同一个div元素并进行样式声明，而且部分样式声明有重复，因为样式声明最终只能取一个值，如background只能是一个颜色。因此，要在应用样式之前，首先对这些选择器进行比较，比较的方法则是按一定规则将选择器换算成数值，比较数值的大小，大的则胜出，该选择器对应的样式声明也会优先执行，从而覆盖其他选择器中相同的声明。

<style type="text/css">

*{ background: black;
   color:#fff;}/*0.0.0.0*/
div{ background: blue;
     width: 100px;
     height: 100px;}/*0.0.0.1*/
.myDiv{ background: yellow;} /*0.0.1.0*/   
body div{ background: green;}/*0.0.0.0*/
#myDiv { background: red;/*0.1.0.0*/
}


</style>




<div id="myDiv" class="myDiv">测试用盒子</div>

 

以上述代码为例：

首先要明确换算规则（比较选择器的前提-将其换算成值）：

（1）id选择器为0.1.0.0；

（2）类，伪类选择器为0.0.1.0；

（3）元素标签，伪元素为0.0.0.1；

（4）通配符*为0.0.0.0

根据该规则将上述样式换算如下：

*{ background: black;
   color:#fff;}/*0.0.0.0*/
div{ background: blue;
     width: 100px;
     height: 100px;}/*0.0.0.1*/
.myDiv{ background: yellow;} /*0.0.1.0*/   
body div{ background: green;}/*0.0.0.0*/
#myDiv { background: red;/*0.1.0.0*/
}

可见，#myDiv的值最大，因此在对重复的样式声明background进行赋值的时候就会优先采取{background:red;}，最终显示背景色为红色。所以，对于选择器的特殊性是针对“同一个或一些元素采取了不同的选择器进行样式声明，且含有重复声明的”的情况的。

二、对于特殊性还要注意的一点就是!important声明和内联样式。

（1）当标签自身含有style属性时，即内联样式存在的时候，内联样式和选择器样式（内嵌和外链）发生冲突时，内联优先，虽然不是选择器来声明样式，但是其特殊性值为1.0.0.0。

（2）!important声明。格式为：选择器{声明：声明值 !important;}.如.myDiv{ background:yellow !important;},此类样式优先于所有样式包括内联样式。如上述代码,如果将

.myDiv{ background: yellow;}换为.myDiv{ background:yellow !important;}那么，最终的背景颜色将为黄色。