（3）CSS 结构和层叠

本知识学习用时：3小时，总第26/10000小时

前言：在上一篇《Oli的前端一万小时》之：（2）CSS选择器详解中，我们文章一开始就谈了“结构树”，也明白了之后的种种“选择器”都是建立在有这个“结构树”的基础之上。这篇，我们将详细阐述“结构树”之于“继承”、“层叠”等的重要性。

① 继承：继承是指在结构树中，从一个元素向其后代元素传递属性值所采用的机制；

② 层叠：层叠是一个“过程”，是浏览器“考虑”的“过程”——浏览器在确定应当向一个元素应用哪些值时，浏览器不仅要考虑“继承”，还要考虑“声明的特殊性”，另外还需要考虑“声明本身的来源”。

一、特殊性/特定性

“特殊性/特定性”对于理解如何向文档应用声明很重要。

如果一个规则能“更准确”地选择一个元素，那么这个规则就更为“特定/特殊”！

可以通过计算的方法来得到这个“特定性”，值越大，特定性越强：

例如：

⚠️ 注： 通配选择器对一个选择器的特定性没有贡献，其“特定性=0000”，虽全是 0 ，但这不代表他没有“特定性”。反而需要记住的是：0 特定性比无特定性要强。

⚠️ 注：有时某个声明可能非常重要，超过了所有其他声明，则在这些声明结束分号前加上 !important

如：

二、继承

结构树

继承是 CSS 中最基本的内容之一。

继承的值没有“特定性”，甚至连 0 特定性也没有。因此我们随时能使用一个更“特定”的选择器来覆盖其从父选择器继承的属性。

一般来讲，如果样式会影响你的文本外观，则所有这些样式都能“继承”。如：字体颜色 color 、所有与字体相关的属性:

⚠️ 而大多数 “框模型属性” 就不能继承（包括外边距、内边距、背景和边框），比如给 元素加了一个边框样式，不代表我们希望这个“身体”里所有的元素都有“边框”。

三、层叠

CSS：Cascading Style Sheets 层叠样式表。

CSS 基于的方法就是让所有样式“层叠”在一起，这是通过结合“继承”和“特殊性”做到的。

层叠是一个“过程”，是浏览器“考虑”的“过程”——浏览器在确定应当向一个元素应用哪些值时，浏览器不仅要考虑“继承”，还要考虑“声明的特殊性”，另外还需要考虑“声明本身的来源”。

站在“浏览器”的角度，它会进行以下几步来决定应用什么样式：

第一步：收集所有样式表；

包括：Web 页面作者写的样式表，读者自己增加的样式表，还有浏览器的默认样式。

第二步：找到所有匹配的声明；

第三步：对所有匹配的规则排序；

① 标志 !important 的规则的权重要高于没有 !important 标志的规则。

② 按“来源”——创作人员、读者、浏览器，对应用到给定元素的所有声明排序。一般来说，创作人员的样式要胜于读者的样式；有 !important 标志的读者样式强于所有其他样式（包括有 !important 标志的创作人员样式）；创作人员样式和读者样式都比浏览器默认样式要强。

第四步：按上文讲的“特定性”计算值对所有声明排序；

第五步：按出现顺序对应用到给定元素的所有声明排序。

① 一个声明在样式表或文档中越后出现，它的权重就越大；

② 如果一个样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。

四、对上篇文章中遗留问题的解答

如上一篇文章所说，我们需要按以上顺序来声明链接样式。

通过这篇的学习我们知道了原因：

① 他们都有相同的权重、来源；

② 所有这些选择器的“特定性”值都是一样的：0011；

③ 因此，顺序上与元素匹配的最后一个选择器才会胜出。

即：

首先，

正常情况下，a 的颜色是“蓝色”；

然后，

当我鼠标放上去之后，:hover 在顺序上在下边，所以变为“橙色”；

接着，

当我鼠标按下去时，表示我的鼠标正在这个元素上，那么 :link、:hover、:active 都生效，但按层叠规则，:active 在顺序上的最下边，故对以上产生覆盖，所以变成“黑色”；

最后，

当我点击过这个链接之后，鼠标移开后，:link 和 :visited 生效，:visited 将 :link 覆盖并永久生效。

后记：本篇知识点不多，属于基础知识，需要烂熟于心。路还很长，希望收获在路上，快乐在路上。

欢迎继续关注下文 ：

（4）CSS 值和单位

（本文版权归 ”公号 | Oli的前端一万小时“ 所有，转载需说明来源）