CSS样式优先级

在CSS中使得一个具体的元素获得一个样式定义属性集合，有以下几种方式：

1、直接在元素中通过style来定义标签样式（许多JS是通过这种方式来动态控制元素的样式）
比如有以下代码

通过style方式来定义了div标签的样式，这种方式定义样式在css规范中有很高的优先权（1000）

2.通过ID选择器来获取样式定义，有以下代码：

然后我们定义了ID选择器的：
#bgc{background:black}
ID选择器也是据有比较高的优先权，每个权重为100

3、类选择器，伪类选择器，属性选择器
类选择器的定义和使用：
.bgc{background:black}

这三类选择器在css规范中拥有的优先权相对较低，每个权重为10

4、元素和伪元素选择器
比如以下代码
div{background:black}

这类选择器在css规范中的优先权非常低，每个权重为1

5、其它选择符（全局选择符*，子选择符）
优先权最低，每个权重为0


6、继承
比如有这么一段html代码，

这里我设定.no1{ text-align:center},那么它下面的

标签也就继承了文字居中这个属性了。
这里的p标签获取到的样式的方式称之为继承，继承并不参与到优先权的计算当中，只要有其它方式的定义都会覆盖继承而来的属性。

在具体混合方式的css样式定义中，同一个属性的具体取值的确定，便是根据每种样式定义的方式的加权和来确定的。

优先值只是确定属性值的一个因素，还需要遵循的原则包括：
1、!important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。 
2、如果优先权一样，则按源码中“后来者居上”的原则。 
3、由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。

具体的例子如下（在IE7和FF中测试）：

有这么一段html代码，我们不断修改style定义，观察颜色变化（为了说明跟源码顺序的关系，一次向上添加样式定义）

  
  
  

      shaosheng test
  

 


1、只有一行样式定义 h1 {color: red;}
   只有一个普通元素加成，优先值为 0,0,0,1  显示红色

2、原有的h1定义之上添加一样定义 body h1{color:green}
   有两个普通元素的加成，优先值为 0,0,0,2 显示绿色
  
3、新添样式定义 .myColor{color:black}
   只有一个class选择符，优先值为  0,0,1,0 显示黑色

4、新添样式定义 body .myColor{color:pink}
   有一个普通元素和一个class选择符加成，优先值为 0,0,1,1 显示粉色

5、新添样式定义 .bodyColor .myColor{color:blue}
   由两个class选择符加成，优先值为 0,0,2,0  显示蓝色
  
6、新添样式定义 #idColor{color:silver;}
   只有一个ID选择符，优先值为 0,1,0,0 显示银色

7、直接在h1标签上加上style定义style="color:purple"
   这时，style定义的样式，优先值为 1,0,0,0 显示紫色
  
8、到这个时候完整的源代码为：
  
  
  
  

      shaosheng test
  

 

在任何一个样式定义中加入!important就会显示该样式定义的颜色，当我们在多个定义上加入了!important,
这个几个样式值就会按照以上的优先值计算原则进行比较进行取舍


9、最后，我们把源码改成以下形式

  
  
  

      shaosheng test
  

 


在这里我们定义了两个级别相同的class选择器，并且在同一个标签中引用，进过测试不管
class="myColor ortherColor" 中两个选择符的先后顺序如何，文本显示的始终是黑色，只跟源码顺序有关系。

10、源码顺序问题
    CSS源码，有两种方式一种是html中的style标签，一种是css文件，style标签中的顺序优先于文件中的优先级，文件中的优先级，
    按照文件引入顺序而定。
   
最后，就一个非专业人员的感觉来说，这里的优先级跟JAVA中变量的优先级是相通的，大致原则是作用范围越小的优先级越高。