CSS样式优先级

一、层叠

什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）：

重要性（Importance）  、专用性（Specificity）、源代码次序（Source order）

 1.层叠性 
      可以为一个元素定义多个样式，当样式属性不冲突时，可以同时将这些样式应用到元素上
      div{
         color:red;
      }
      div{
         font-size:20px;
      }
      div{
         background:gray;
      }

2.优先级
      如果样式声明冲突时，会按照样式的优先级来应用定义的样式规则
          由低到高：
         浏览器默认设置       最低
         内部样式和外部样式   中(就近原则即：源码次序）
         内联样式             最高

3.调整显示的优先级（重要性）
      !important规则：
      调整显示的优先级
      将!important添加在属性值之后，与值之间用空格隔开，就能优先使用当前样式
      ex:
        color:red !important;

注意: 重载这个 !important 声明的唯一方法是在后面的源码或者是一个拥有更高专用性的源码中包含相同的 !important 特性的声明。

4.选择器的优先级（专用性）
     权值：标识当前选择器的重要程度，权值越大优先级越高。
    元素选择器/伪元素选择器：1
    类选择器/伪类选择器/属性选择器：  10
    ID选择择器：100
    内联样式：  1000

    选择器的权值加到一起，大的优先
    权值相同，以后定义的为主（源码次序）

选择器	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#indentifier	0	1	0	0	0100
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="zh-CN"] > .inline-warning	0	0	2	2	0022
没有选择器, 规则在一个元素的 <style> 属性里	1	0	0	0	1000

注意: 通用选择器 (*), 复合选择器 (+, >, ~, ' ') 和否定伪类 (:not) 在专用性（选择器优先级）中无影响。

 

二、继承

哪些属性默认被继承哪些不被继承大部分符合常识。如果你想确定，你可以参考CSS参考资料—— 每个单独的属性页都会从一个汇总表开始，其中包含有关该元素的各种详细信息，包括是否被继承。

1.继承性
      大部分样式可以被继承（子元素继承父元素的样式特征）
      必须是有层级关系的嵌套
      <div style="color:red;">
         <p>p</p>
      </div>

2.控制继承

CSS为处理继承提供了四种特殊的通用属性值：

• inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。
• initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。（优先与浏览器默认样式一样-->其次才是父元素）
• unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。（优先与父元素一样-->其次才是浏览器默认样式）
• revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。

注意: initial 和 unset 不被IE支持。

3.重新设置所有属性值

CSS速写属性 all 能够被应用到每一个继承属性，一次性应用所有的继承属性。这里的值可以是继承属性里的任何一个 (inherit, initial, unset, or revert)。

EX:   {all:inherit}