CSS优先级规则详尽解读

开发 前端
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序,既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。

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

CSS优先级的详细解说

在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。简单说来,CSS是层叠样式表(CascadingStyleSheets)的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,应该很少没有听说过CSS了,因为在制作网页过程中我们经常需要用到。我们能通过CSS为文档设置丰富且易于修改的外观,以减轻网页制作者的工作负担,从而减轻制作及后期维护的代价。

  其实现在还来讲CSS是什么,CSS有什么作用完全是多余的,相信从事网页制作的朋友都已经或多或少的接触过了。言归正传,开始进入今天的话题。

一、什么是CSS优先级?

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

二、CSS优先级规则

  既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。

  样式表中的特殊性描述了不同规则的相对权重,CSS优先级的基本规则是:

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

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

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

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

例如:

  1、每个ID选择符(#someid),加0,1,0,0。

  2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。

  3、每个元素或伪元素(:firstchild)等,加0,0,0,1。

  4、其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。

  按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

  CSS优先级问题其实就是一个冲突解决的问题,当同一个元素(内容)被CSS选择符选中时,就要按照优先级取舍不同的CSS规则,这其中涉及到的问题其实很多。

【编辑推荐】

  1. 解读CSS优先级的概念和规则
  2. 技术分享 如何实现CSS横向导航
  3. 术语汇编 基本CSS滤镜概述
  4. 完美实现丰富的CSS文字效果
  5. 鼠标经过时改变DIV背景颜色的三种途径


 

责任编辑:佚名 来源: 236web.com
相关推荐

2010-09-06 14:53:27

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

优先级反转

2010-07-09 14:28:59

UML组成

2009-08-28 17:10:59

C#线程优先级

2010-09-07 15:17:47

CSS优先权CSS

2020-09-30 09:07:37

DevOps

2010-03-18 14:09:20

Java线程同步

2021-04-06 10:45:18

React前端优先级

2019-09-08 16:26:10

CSS前端

2010-07-19 16:25:06

Perl数组

2010-08-03 10:59:14

Flex代码规范

2015-06-02 11:26:29

产品团队

2009-08-12 13:07:13

C#运算符优先级

2010-08-06 16:07:55

Flex通信

2012-06-27 10:59:05

WAN优化应用交付

2023-11-03 08:22:09

Android系统算法
点赞
收藏

51CTO技术栈公众号