Css权重解析

简介: Css权重解析关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

Css权重解析

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:

specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

继承或者* 的贡献值 0,0,0,0
每个元素(标签)贡献值为 0,0,0,1
每个类,伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 重要的 ∞ 无穷大

权重是可以叠加的

比如的例子:

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

注意:

1.数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。

  1. 继承的 权重是 0

总结优先级:

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
  7. 同一类选择器则遵循就近原则。
总结:权重是优先级的算法,层叠是优先级的表现

相关文章
|
1月前
|
机器学习/深度学习 自然语言处理 算法
深度解析预训练权重的本质和作用
深度解析预训练权重的本质和作用
37 1
|
3月前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
125 0
|
4月前
|
编解码 前端开发 信息无障碍
CSS媒体查询(@media)全面解析
CSS媒体查询(@media)全面解析
40 1
|
4月前
|
前端开发 BI 开发者
Javaweb之HTML,CSS的详细解析
新浪新闻-正文实现 2.3.2.1 正文排版 2.3.2.1.1 分析 整个正文部分的排版,主要分为这么四个部分: 1). 视频 (当前这种新闻页面,可能也会存在音频)
49 0
|
4月前
|
弹性计算 前端开发 容器
CSS之Flex布局的详细解析
Flex布局 目标:熟练使用 Flex 完成结构化布局 01-标准流 标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
59 0
|
4月前
|
前端开发
CSS盒子模型的详细解析(2)
行内元素 – 内外边距问题 场景:行内元素添加 margin 和 padding,无法改变元素垂直位置 解决方法:给行内元素添加 line-height 可以改变垂直位置
50 0
|
4月前
|
前端开发
CSS盒子模型的详细解析(1)
03-盒子模型 作用:布局网页,摆放盒子和内容。 盒子模型-组成 内容区域 – width & height 内边距 – padding(出现在内容与盒子边缘之间)
34 0
|
4月前
|
前端开发
CSS详细解析二
05-显示模式 显示模式:标签(元素)的显示方式。
36 0
|
9天前
yolo-world 源码解析(六)(2)
yolo-world 源码解析(六)
18 0
|
9天前
yolo-world 源码解析(六)(1)
yolo-world 源码解析(六)
12 0

推荐镜像

更多