CSS 收集解析模型 #18
Description
概述
CSS解析模型大概分为两部分：
- 收集分解CSS样式
- 权重确定CSS样式
- 应用CSS样式
1. 收集分解CSS样式
首先，接收所有可以接收的css样式，包括内联（属性样式）、内部样式（style标签）、引用样式（link标签）、浏览器默认样式、浏览器用户自定义样式表。
然后，把所有CSS样式分解成最小单元，比如：
下面的样式：
.oneClass .twoClass {
width: 100px;
margin: 20px;
}
会被分解如下：
.oneClass{
width: 100px;
}
.oneClass{
margin-left: 20px;
}
.oneClass{
margin-right: 20px;
}
.oneClass{
margin-top: 20px;
}
.oneClass{
margin-bottom: 20px;
}
.twoClass{
width: 100px;
}
.twoClass{
margin-left: 20px;
}
.twoClass{
margin-right: 20px;
}
.twoClass{
margin-top: 20px;
}
.twoClass{
margin-bottom: 20px;
}
2. 权重确定CSS样式
这里很简单，只有如下的规则：
- 重要声明的特殊性冲突会在重要声明内部解决（带有!important），遵守最近原则（覆盖），不会与非重要声明相混。
- 非重要声明会使用权重来解决冲突，解析并计算它们的权重，权重高的会获胜；权重相同的话，根据来源优先级：浏览器用户自定义>内联>内部>引用>浏览器默认；如果来源相同，则遵守最近原则。
1. 重要声明，!important，放在声明的最后
2. 内联样式特殊性，1, 0, 0, 0
3. ID选择器，0, 1, 0, 0
4. 类选择器、属性选择器或伪类，0, 0, 1, 0
5. 元素选择器和伪元素，0, 0, 0, 1
- 额外原则
1. 为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则
2. 无视DOM树中的距离
3. 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级
3. 应用CSS样式
通过第一步确定页面上所有元素的样式后，开始计算并确定每个元素的样式，包括位置、大小、颜色等等，内容规则都很多。
参考
书
《CSS 权威指南》