CSS权威指南阅读笔记第三章01

简介: CSS权威指南阅读笔记 权重和层叠

特指度:

特指度就是权重,浏览器会计算每个规则中选择符的特指度,如果两个或多个属性的声明有冲突,权重最高的胜出;

一个特指度有四部分构成:

序号 选择符 特指度
0 行内样式 1,0,0,0
1 ID 0,1,0,0
2 类属性、属性选择符、伪类 0,0,1,0
3 元素选择符,伪元素 0,0,0,1
4 通用选择符 0,0,0,0
5 连接符,继承的值

特指度的值是从左向右比较的;

重要性 important

!important始终放到声明末尾的分号之前;重要规则始终胜出;

2、继承

继承指的是某些样式不仅应用到所指的元素上,还应用到元素的后代上;

  1. 很多属性是不继承的,如边框属性border,边距等;
  2. 继承的值没有特指度,连零都没有;

3、层叠

CSS采用层叠的机制把样式组合到一起,规则如下:

  • 找到匹配特定元素的所有规则
  • 按权重排序应用到特定元素的声明上(主要是!important)
  • 按来源排序应用到特定元素的声明上(如浏览器自定义)
  • 按特指度排序
  • 按声明的前后位置应用;

CSS三大特性:层叠,继承和优先级

相关文章
|
3月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
35 0
|
3月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记(2)
理解CSS | 青训营笔记
36 0
|
3月前
|
前端开发 容器
理解CSS | 青训营笔记(1)
理解CSS | 青训营笔记
51 0
|
6月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
83 2
|
6月前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
66 1
|
6月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
104 1
|
6月前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
54 1
|
6月前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
80 1
|
6月前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
62 1
|
6月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
37 0