解读CSS优先级的概念和规则

开发 前端
你对CSS优先级的概念是否了解,这里和大家分享一下CSS优先级的概念和规则,所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

本文向大家描述一下CSS优先级的概念和规则,在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。CSS是层叠样式表(CascadingStyleSheets)的简称它的规范代表了互联网历史上一个独特的发展阶段。

解读CSS优先级

在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。

首先,我们对CSS作一个简单的说明:CSS是层叠样式表(CascadingStyleSheets)的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,应该很少没有听说过CSS了,因为在制作网页过程中我们经常需要用到。

其次:我们能通过CSS为文档设置丰富且易于修改的外观,以减轻网页制作者的工作负担,从而减轻制作及后期维护的代价。其实现在还来讲CSS是什么,CSS有什么作用完全是多余的,相信从事网页制作的朋友都已经或多或少的接触过了。

一、什么是CSS优先级?

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

二、CSS优先级规则

既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

◆统计选择符中的ID属性个数。

◆统计选择符中的CLASS属性个数。

◆统计选择符中的HTML标记名个数。

***,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数(css2.1是用4位数表示)。(注意,你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

三、附加说明

文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<divstyle="color:red">blah</div>的样式,而外部定义指经由<link>或<style&amp;gt;卷标定义的规则。

有!important声明的规则高于一切。
如果!important声明冲突,则比较优先权。
如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。

关于经由@import加载的外部样式,由于@import必须出现在所有其它规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。
还需要说一下,IE是可以识别位置错误的@import的,但无论@import在什么地方,它都认为是位于所有其它规则定义之前的,这可能会引发一些误会。
优先权问题看起来简单,但背后还是有非常复杂的机制,在实际应用中需要多多留意。

详文参考:http://www.mypchelp.cn/it/20091015/webdesign_152443.shtml

【编辑推荐】

  1. 详解CSS优先级的读法
  2. CSS样式表特点及嵌入网页的四种途径
  3. 全面解析CSS优先级规则
  4. CSS外边距设置属性margin用法
  5. 探究CSS高级语法中选择器分组和CSS继承用法
责任编辑:佚名 来源: mypchelp.cn
相关推荐

2010-09-13 17:30:07

CSS优先级

2010-08-31 11:04:48

CSS优先级

2010-09-01 14:10:36

CSS优先级

2012-08-14 09:38:29

WAN优化

2010-09-16 15:32:20

CSS选择器

2022-12-23 09:41:14

优先级反转

2019-09-08 16:26:10

CSS前端

2020-09-30 09:07:37

DevOps

2010-03-18 14:09:20

Java线程同步

2021-04-06 10:45:18

React前端优先级

2009-08-28 17:10:59

C#线程优先级

2010-09-07 15:17:47

CSS优先权CSS

2009-12-30 16:22:58

基于MPLS

2009-07-21 08:41:05

Scala操作符优先级

2023-11-03 08:22:09

Android系统算法

2020-06-04 08:36:55

Linux内核线程

2024-04-30 11:00:10

数据中心

2016-01-06 17:13:14

Web前端分清主次

2016-02-18 18:18:52

Web前端主次优先级

2015-06-02 11:26:29

产品团队
点赞
收藏

51CTO技术栈公众号