《CSS权威指南第三版》第三章的读书笔记

第3章 结构和层叠

继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，用户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。

1. 特殊性
   1. 概述

特殊性是对于选择器来说的。多对规则匹配同一元素时，用户代理会使用最高特殊性的声明。当然这并不是解决冲突的全部，所有冲突的解决都由层叠来处理，本章后面会介绍。

一个选择器的具体特殊性如下确定：

1. 对选择器给定的各个ID属性值，加0,1,0,0。
2. 对选择器给定的各个类属性值、属性选择或伪类，加0,0,1,0。
3. 对选择器给定的各个元素和伪元素，加0,0,0,1。
4. 结合符和通配选择器对特殊性没有任何贡献，即0,0,0,0。后面会更多介绍这些值。

注意，是“各个”，不是简单地叠加。

特殊性值中，同样位置的数字，数字越大权重越大；前面的数字比后面的数字权重更大。

2. 声明和特殊性

一旦确定一个选择器的特殊性，这个值将授予其所有相关声明。对同一元素的多条声明不会使一条规则的特殊性值叠加。

3. 通配选择器特殊性

通配选择器对一个选择器的特殊性没有贡献。相比之下，结合符根本没有特殊性，甚至连0特殊性都么有。

4. ID和属性选择器的特殊性

一个ID选择器#myid为选择器的总特殊性增加了0,1,0,0，而一个属性选择器[id="myid"]只对总特殊性增加0,0,1,0。

5. 内联样式特殊性

每个内联声明的特殊性都是1,0,0,0。与ID选择器的特殊性相同。

6. 重要性

超过上述所有其他声明的重要声明，在这个声明的结束分号之前插入!important来标志。

2. 继承

基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。元素不会把值向上传递到其祖先，一个例外是body元素的背景样式可以传递到html元素。

继承容易理解，但仍需记住：

1. 有些属性不能继承，一般地，大多数框模型属性，包括外边距、内边距、背景和边框都不能继承。
2. 继承的值没有特殊性这个概念。

3. 层叠
   1. 概述

层叠用于处理特殊性相等的不同规则的冲突。

CSS2.1的层叠规则：

1. 找出所有相关规则
2. 有!important的规则权重强过没有!important的规则。规则来源有创作人员、读者和用户代理。一般地，创作人员的样式胜过读者的样式。有!important标志的读者样式强于所有样式，包括有!important的创作人员样式。创作人员样式与读者样式都比用户代理的默认样式强。
3. 按特殊性高低处理。
4. 特殊性相同的规则，越后出现权重越大。一般认为，导入样式表在主样式表声明之前。

2. 按权重和来源排序

权重由大到小：

1. 读者的重要声明
2. 创作人员的重要声明
3. 创作人员的正常声明
4. 读者的正常声明
5. 用户代理声明

3. 按特殊性排序

如同上文所述，比较特殊性的值。

4. 按顺序排序

权重、来源和特殊性完全相同，按顺序排序。

建议伪类顺序：link-visited-hover-active（LVHA）

通过将伪类链接在一起，能缓解特殊性和顺序带来的问题，如：

:link:hover:active{color:orange;}

:visited:hover:active{color:silver;}

5. 非CSS表现提示

例如font元素。非CSS提示被处理为特殊性为0，并出现在创作人员样式表的最前面。