0

0

CSS规则层叠时的优先级算法

php中文网

php中文网

发布时间:2016-05-16 12:06:16

|

1728人浏览过

|

来源于php中文网

原创

css 规则的优先级是web前端开发人员必须理解的一个概念,我们常用的添加样式的方法有4种。

1、inline style 
2、embeded style 
3、external style 
4、user style  

inline style是丑陋的,它们穿梭在HTML文档中,与HTML元素扭成一团,给Web前端开发人员造成了许多麻烦。它们往往以这样的面目出现:

This is a paragraph.

embeded style比inline style绅士一些,它们也寄宿在HTML文档中,但是它们不屑于与HTML元素扭成一团。它们往往在 

external style是个贵族,它不愿意同HTML呆在一起,所以干脆以外部文件的形式独立存在。通常我们使用  元素或者@import语句将它们导入HTML。 

立即学习前端免费学习笔记(深入)”;

我们应当尽可能使用external style,我想理由有很多,大家都知道,我也就不重复了。 

还有一种user style与以上三者略有不同,如果你使用IE浏览器,那么你可以在Tools – Internet Options – General – Appearance – Accessibility – User style sheet 下找到添加user style的地方(原谅我没有中文版的IE浏览器)。 

既然我们有如此多的添加style的方法,那么难以避免样式会产生层叠。如:

This is a paragraph.

我们在使用以上inline style的同时,又在我们的external style中使用了:

p{ 
    color : yellow; 
}

我们甚至还在拥有 class="intro" 的 

 元素上应用了:

p.intro{ 
    color : blue; 
}

这样我们就 在同一元素的同一属性 color 上,拥有多条CSS规则指定了值 。这种情况被称为层叠(Cascading)。当层叠发生时,CSS Parser将根据优先级算法来确定最终选用的值。  

优先级算法按照先后顺序考虑以下三个方面:
1、CSS规则的重要性和来源 
2、CSS规则的特殊性 
3、CSS规则在文档中出现的顺序  

算法过程分为一项4步: 

1、针对某一元素的某一属性,列出所有给该属性指定值的CSS规则。如上例中,在 class="intro" 的 

 元素上,有三条CSS规则指定了 color 属性。 

2、根据声明的重要性和来源进行优先级排序 

重要性有两种:
important  和 normal(即非important)  

在CSS规则后添加 !important 的重要性要高于没有添加的。 

来源有三种: 

Tana
Tana

“节点式”AI智能笔记工具,支持超级标签。

下载

user agent stylesheet – 浏览器默认样式  

author stylesheet – 开发人员定义的样式  

user stylesheet – 用户在浏览器中定义样式  

重要性和来源的优先级排序从低到高是: 

user agent stylesheet  

user style sheets中的normal规则  

author style sheets中的normal规则  

author style sheets中的important规则  

user style sheets中的important规则  

经过以上排序,如果有一条CSS规则的优先级高于其他所有竞争规则,那么算法结束,返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级,那么它们将要继续竞争下去,算法将进入第3步。 

3、按照特殊性(Specificity)排序 

CSS将计算多条规则中指定每一规则的selector的特殊性值,该值越高,优先级越高。 

特殊性值是一个由4个整数组成的一个类似数组的值:a,b,c,d,其中a的权重最高,依次类推,d的权重最低。selector特殊性值的计算方法是:
如果该规则是一条inline style,那么a = 1 
如果该规则由selector指定,selector中出现的id selector的数量就是b的值 
如果该规则由selector指定,selector中出现的属性selector(包括class selector)或者伪类selector的数量总和就是c的值 
如果该规则由selector指定,selector中出现的元素selector或者是伪元素selector的数量总和就是d的值。  

universal selector * 的特殊性值为0,0,0,0  

官方网站 提供了一些例子可以加深理解。 

在根据特殊性值排序时,由于a的权重最高,因此首先比较a,在a相同的情况,在比较b,依次类推。因此不论b,c,d值有多大,inline style总是具有最高的特殊性。 

如果根据以上特殊性排序后,有一条CSS规则的优先级高于其他所有竞争规则,那么算法结束,返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级,那么它们将要继续竞争下去,算法将进入第4步。 

4、比较CSS规则在文档中出现的顺序 

出现在后的总是比出现在前的具有更高的优先级,因此出现在最后的那条语句将被作为该属性的值。

相关专题

更多
云朵浏览器入口合集
云朵浏览器入口合集

本专题整合了云朵浏览器入口合集,阅读专题下面的文章了解更多详细地址。

20

2026.01.20

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

29

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

160

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

120

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

41

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

14

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

23

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

172

2026.01.18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 21.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号