内容简介：网页最终呈现的样子是各种CSS声明最终叠加到一起的效果，我们以下面的HTML文档为例：稍微有点HTML和CSS基础的人都能看出，h1最终呈现的字体大小是10px，因为内联样式的优先级更高。打开Chrome开发工具，可以看到对h1的字体大小有三处声明。浏览器决定最终采用的哪个值，是通过各种考量的。各处声明的PK过程我们称之为
网页最终呈现的样子是各种CSS声明最终叠加到一起的效果，我们以下面的HTML文档为例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<h1 style="font-size: 10px">h1 title</h1>
</body>
</html>
复制代码
稍微有点HTML和CSS基础的人都能看出，h1最终呈现的字体大小是10px，因为内联样式的优先级更高。
打开Chrome开发工具，可以看到对h1的字体大小有三处声明。浏览器决定最终采用的哪个值，是通过各种考量的。各处声明的PK过程我们称之为 层叠 。PK的胜负由以下三个方面决定：
- 该元素的样式声明来自哪里（Origin: 来源 ）？
- 该声明的特殊性怎么样（specificity: 特殊性 ）？
- 这些声明谁先谁后（Order of Appearance: 出现先后）？
我们下面对这三个方面逐一讨论。
来源（Origin）
这里的来源指的是CSS声明在哪里？CSS标准中将Origin分为三大主类：
- Author Origin。网站的开发人员自己写的样式
- User Origin。浏览网页的用户自己加的定制样式
- User agent Origin: 用户代理给的默认样式。比如开头的例子中Chrome给h1默认2em的字体大小。
根据来源，浏览器评判出了声明的 重要性 （Importance）。评判标准很简单：
- 第一队列： User Agent设置了!important的重要性最高，User设置的!important 其次，较低的是Author的!important 声明。
- 第二队列： Author的普通申明；User的普通申明；User agent的普通申明。
在层叠PK中，如果相同的选择器重要性不同，那么Origin这一层的PK就决出了胜负。
如下例子：
在Origin这一层的PK中：
1号是User的普通申明； 2号选手是用户的!important声明； 3号选手是User agent的普通声明 所以 2号胜出 :clap: :clap: :clap: :clap:
Specificity(特殊性)
如果两个属性的声明重要性不分上下，这时候该PK特殊性了， 特殊性是对选择器而言的 。
w3标准里面这样描述特殊性的计算：
A selector’s specificity is calculated for a given element as follows:
- count the number of ID selectors in the selector (= A)
- count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
- count the number of type selectors and pseudo-elements in the selector (= C)
- ignore the universal selector
翻译并自己组织语言如下：
一个选择器的特殊性这样计算：
统计ID选择器的数量（记为A）
统计类选择器、属性选择器、伪类选择器的数量（记为B）
统计元素选择器和伪元素选择器的数量（记为C）
这里推荐一个在线计算选择器Specificity的网站： specificity.keegan.st/
我们用一个三元组来记录一个选择器的特殊性，例如：
ul ----> (0, 0, 1) ul, ul ----> (0, 0, 2) #list ----> (1, 0, 0) #list #sub-list li ---> (2, 0, 1) #list .list-item ---> (1, 1, 0) 复制代码
那么得到三元组之后怎么比较两个三元组的优先级呢？
- 比较A，大的胜出
- A相同，比较B，B大的胜出
- 最后比较C
同样举个:chestnut:：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1 {
color: green;
}
h1#title {
color: red;
}
h1.title {
color: blue;
}
</style>
</head>
<body>
<h1 id="title" class="title">h1 title</h1>
</body>
</html>
复制代码
h1最终呈现的样子是红色：
在上面三条声明中，选择器对应的特殊性如下：
| 选择器组 | ID选择器数量 | 类或属性选择器数量 | 元素或伪类选择器数量 | 特殊性 | 结果 |
|---|---|---|---|---|---|
| h1#title | 1 | 0 | 1 | （1， 0， 1） | :clap::clap::clap: |
| h1.title | 0 | 1 | 1 | （0， 1， 1） | :broken_heart: |
| h1 | 0 | 0 | 1 | （0， 0，） | :broken_heart: |
出现顺序（Order of Appearance）
无需多言，前两轮PK没有结果的按照出场先后顺序后来居上，决定最终胜负。
继承
有CSS声明的元素退场了，没有CSS声明的只能靠继承或者默认样式了。
某些样式声明会继承到子元素（如颜色、字体大小），有些则不会（如border等）。
总结
CSS 层叠是考虑样式来源、选择器的特殊性、以及继承来决定最终效果的过程。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web Applications (Hacking Exposed)
Joel Scambray、Mike Shema / McGraw-Hill Osborne Media / 2002-06-19 / USD 49.99
Get in-depth coverage of Web application platforms and their vulnerabilities, presented the same popular format as the international bestseller, Hacking Exposed. Covering hacking scenarios across diff......一起来看看 《Web Applications (Hacking Exposed)》 这本书的介绍吧!
