css层叠性规则

一、当有多个样式规则应用到同一个元素时，应该优先选择哪个规则呢？

  在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则。 

各种选择器的特殊值：

（1）内联样式的特殊值：1 0 0 0

（2）id选择器的特殊值为：0 1 0 0

（3）类选择器、属性选择器、伪类的特殊值为：0 0 1 0

（4）元素选择器、伪元素的特殊值为：0 0 0 1

（5）如果声明了重要性!important ,特殊值为1 0 0 0，但它高于内联样式的特殊值。

（6）通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的特殊值都为0

例如：<div class="div1"><p>css层叠样式</p></div>
有如下几套样式指向p元素：
p{color:red};//特殊值为0 0 0 1
div .div1{color:black;}//特殊值为 0 0 1 1
.div{color:green;}//特殊值为0 0 1 0
这里因为第二个规则的特殊值最大，所以p元素内文本的颜色为黑色。

如果p{color:red !important;};
那么p元素文本内的颜色为红色，因为声明了重要性，优先级高于其他所有规则。 

二、如果特殊性相等的两个规则应用到同一个元素，那么哪个会被优先选择呢？？

                   1、按权重和来源排序：
  来源有三种：编程人员定义样式、用户自定义样式、浏览器代理样式

  结合重要声明!important，它们的权重从大到小排序：
（1）、用户自定义重要声明
（2）、编程人员重要声明
（3）、编程人员正常声明
（4）、用户自定义正常声明
（5）、浏览器代理声明

            2、按顺序：（如果两个规格的权重、来源和特殊性相同，那个在样式表中的后一个会胜出）
例：h1{color:red;}  
                 
        h1{color:black;}
结果：h1的文本内容的颜色为黑色。