CSS权威指南读书笔记-结构和层叠

选择器的特殊性：特殊性的值表示为四个部分 ，比如 0 0 0 0

---

对于选择器中给定的各个ID属性值，加0 1 0 0 

对于选择器中给定的各个类属性值，属性选择或伪类加 0 0 1 0

对于选择器中给定的各个元素和伪元素，加- 0 0 0 1 伪元素有特殊性，其特殊性为0 0 0 1

结合符合通配选择器对特殊性没有任何贡献

内联样式的特殊性为 1 0 0 0 

---

特殊性自左到右逐个比较 1 0 0 0 大于 0 * * *  0 0 1 0 大于  0 0 0 13

重要声明

在属性值结束分号前!important 标志 ，该标志必须放在声明的最后，每个声明都需要加!important才能生效

特殊性：重要声明分为一组，非重要声明为一组，重要声明的特殊性总大于非重要声明，每组元素的特殊性内部分别计算。

继承

继承无特殊性，比0特殊性还弱

层叠

创作人员样式胜过读者样式，有！important样式读者样式要强于其他所有样式，包括有！important样式的创作者样式，创作人员样式和读者样式都比用户代理的默认样式强。

按特殊性排序，较高特殊性的元素权重大于较低特殊性的元素

按出现顺序排序，一个声明在样式表中出现的顺序越靠后，权重越大。一般认为导入样式表中的声明在前，主样式表中的所有声明在后。

！important 强于内联样式

权重的大小顺序为

1、读者的重要声明

2、创作人员的重要声明

3、创作人员的正常声明

4、读者的正常声明

5、用户代理声明

link-visited-hover-active顺序的原因

根据越往后的权重越大原则，actice最先，之后是hover 再是visited  再是link

如果写作：

:active{ }

:hover{}

:link{}

:visited{}

因为一个元素要么是访问过的要么是未访问的，总会覆盖hover，

根据这一规则，想要让未访问的有悬停样式，已访问的没有可以写为：

:link--:hover--:visited--:active

:visited会覆盖hover

为避免冲突，可以使用伪类串联

：link：hover{} 这种写法合法

:link{color:green}

:visited{color:blue}

:link:hover{color:red}

:visited{color:black}