CSS样式优先级

最新推荐文章于 2025-06-22 10:34:17 发布

原创最新推荐文章于 2025-06-22 10:34:17 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML

本文详细介绍了CSS中不同样式定义方式的优先级规则，包括直接样式定义、ID选择器、类选择器等，并通过实例演示了如何确定最终样式。

在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中变量的优先级是相通的，大致原则是作用范围越小的优先级越高。