CSS 收集解析模型

[coconilu]

概述

CSS解析模型大概分为两部分：

1. 收集分解CSS样式
2. 权重确定CSS样式
3. 应用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样式

这里很简单，只有如下的规则：

1. 重要声明的特殊性冲突会在重要声明内部解决（带有!important），遵守最近原则（覆盖），不会与非重要声明相混。
2. 非重要声明会使用权重来解决冲突，解析并计算它们的权重，权重高的会获胜；权重相同的话，根据来源优先级：浏览器用户自定义>内联>内部>引用>浏览器默认；如果来源相同，则遵守最近原则。

1. 重要声明，!important，放在声明的最后
2. 内联样式特殊性，1, 0, 0, 0
3. ID选择器，0, 1, 0, 0
4. 类选择器、属性选择器或伪类，0, 0, 1, 0
5. 元素选择器和伪元素，0, 0, 0, 1

3. 额外原则

1. 为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则
2. 无视DOM树中的距离
3. 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级

3. 应用CSS样式

通过第一步确定页面上所有元素的样式后，开始计算并确定每个元素的样式，包括位置、大小、颜色等等，内容规则都很多。

参考

书

《CSS 权威指南》

链接

优先级