CSS样式优先级

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

1、直接在元素中通过style来定义标签样式(许多JS是通过这种方式来动态控制元素的样式)
比如有以下代码
<div tyle="background:black">
</div>
通过style方式来定义了div标签的样式,这种方式定义样式在css规范中有很高的优先权(1000)

2.通过ID选择器来获取样式定义,有以下代码:
<div id="bgc">
</div>
然后我们定义了ID选择器的:
#bgc{background:black}
ID选择器也是据有比较高的优先权,每个权重为100

3、类选择器,伪类选择器,属性选择器
类选择器的定义和使用:
.bgc{background:black}
<div class="bgc">
</div>
这三类选择器在css规范中拥有的优先权相对较低,每个权重为10

4、元素和伪元素选择器
比如以下代码
div{background:black}
<div></div>
这类选择器在css规范中的优先权非常低,每个权重为1

5、其它选择符(全局选择符*,子选择符)
优先权最低,每个权重为0


6、继承
比如有这么一段html代码,
<div class="no1">
<p></p>
</div>
这里我设定.no1{ text-align:center},那么它下面的<p>标签也就继承了文字居中这个属性了。
这里的p标签获取到的样式的方式称之为继承,继承并不参与到优先权的计算当中,只要有其它方式的定义都会覆盖继承而来的属性。

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

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

具体的例子如下(在IE7和FF中测试):

有这么一段html代码,我们不断修改style定义,观察颜色变化(为了说明跟源码顺序的关系,一次向上添加样式定义)
<html>
   <style>
       h1{color: red}
   </style>
   <body class="bodyColor">
   <h1 id="idColor" class="myColor">
      shaosheng test
   </h1>
 </body>
</html>

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、到这个时候完整的源代码为:
   <html>
   <style>
         #idColor{color:silver;}
         .bodyColor .myColor{color:blue}
          body .myColor{color:pink}
          .myColor{color:black}
          body h1{color:green;}
       h1{color: red;}
   </style>
   <body class="bodyColor">
   <h1 id="idColor" class="myColor" style="color:purple">
      shaosheng test
   </h1>
 </body>
</html>
在任何一个样式定义中加入!important就会显示该样式定义的颜色,当我们在多个定义上加入了!important,
这个几个样式值就会按照以上的优先值计算原则进行比较进行取舍


9、最后,我们把源码改成以下形式
<html>
   <style>
          .ortherColor{color:pink;}
          .myColor{color:black;}
         
   </style>
   <body class="bodyColor">
   <h1 id="idColor" class="myColor ortherColor">
      shaosheng test
   </h1>
 </body>
</html>

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

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

展开阅读全文

没有更多推荐了,返回首页