css权威指南阅读笔记(三)--结构和层叠

本章主要介绍CSS中结构和层叠有关的知识点。

特殊性

    所谓特殊性，就是当一个元素匹配多个规则的时候，只会有一种规则会使其呈现出我们希望的样式，那么我们如何知道哪一个规则会胜出呢？答案就在于每个选择器的特殊性。如果有一个元素有一个或者多个冲突的属性声明，那么拥有最高特殊性的声明会胜出。    选择器的特殊性由选择器本身的组件确定。特殊值表述为四个部分，如0，0，0，0。一个选择器的具体特殊性如下确定：    1.对于选择器中给定的各个ID属性值，加0，1，0，0；    2.对于选择器中给定的各个类属性值，属性选择或伪类，加0，0，1，0；    3.对于选择器中给定的各个元素和伪元素，加0，0，0，1；    4.结合符和通配选择器对特殊性没有任何贡献；

总体来说，通配选择器的特殊性 < ID和属性选择器的特殊性 < 内联样式特殊性 < !important

继承

我们上面所说的特殊性对于理解如何向文档应用声明很重要，同样，还有一个重要的概念，叫做继承。
基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。需要注意的是，继承对于无序列表也适用。继承的值没有特殊性，甚至连0都没有。因此需要尽量避免不加区别的使用通配选择器。（因为其可以匹配任何元素，所以通配选择器往往有一种短路继承的效果。）

层叠

如果两个特殊性相等的规则同时应用到同一个元素的话，会出现什么效果呢？
首先，我们来看一下css2.1中有关层叠的规则：
1.找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器；
2.按显式权重对应用到该元素的所有声明排序。
3.按特殊性对应用到给定元素的所有声明排序。一个声明在样式表或文档中出现的越晚，其权重越大。

按权重和来源排序

在声明权重方面需要考虑5级：
读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明

按特殊性排序

如果向一个元素应用多个彼此冲突的声明，而且他们的权重相同啊，则按照特殊性排序，最特殊的声明最优先；

按顺序排序

如果两个规则的权重，来源，特殊性全部相同的话，那么在样式表中后出现的样式胜出。
推荐的链接样式顺序：LVHA(LOVE-HA)
L:link();
V:visited();
H:hover();
A:active();