CSS学习1（结构和层叠）

继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠(cascade)。本章将讨论这3种机制之间的关联：特殊性、继承和层叠。

特殊性

实际上，可能同一个元素可以使用两个或多个规则来选择，每个规则都有其自己的选择器。
显然，每一对规则中只有一个胜出，因为所匹配的元素只能是某一种颜色。那么怎么知道哪一个规则更强呢？
答案就在于每个选择器的特殊性(specificity)。对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明就会胜出。
那么特殊性由什么来定义呢，由组成选择器的组件确定。

• 对于选择器中给定的各个ID属性值，加0,1,0,0
• 对于选择器中给定的各个类属性值，属性选择或伪类，加0,0,1,0
• 对于选择器中给定的各个元素和伪元素，加0,0,0,1
• 结合符和通配符选择器对特殊性没有任何贡献
• 内联样式，加1,0,0,0

h1 {color:red;}/* 0,0,0,1 */
body h1 {color:green;}/* 0,1,0,2 (winner)*/
h2.grape{color:purple;}/* 0,0,1,1 (winner)*/
h2 {color:silver;}/* 0,0,0,1 */
html > body table tr[id="totals"] td ul > li {color: maroon;}/* 0,0,1,7 */
li#answer {color: navy;}/* 0,1,0,1 (winner)*/

判断大小时，从高位开始看。0,1,0,0大于0,0,999,999。
对于一个规则，浏览器会将其选择器依次应用在各个子规则上：

h1, h2.section {color: silver; background: black;}

会被解开为：

h1 {color: silver;}/* 0,0,0,1 */
h1 {background: black;}/* 0,0,0,1 */
h2.section {color: silver;}/* 0,0,1,1 */
h2.section {background: black;}/* 0,0,1,1 */

重要声明

有时某个声明可能非常重要，超过了所有其他声明。并允许在这些声明的结束分号之前插 入!important来标志。

p.dark {color:#333 !important; background: white;}

所有!important声明会分组在一起，重要声明的特殊性冲突会在重要声明内部解决，而不会与非重要声明相混。类似地，我们认为所有非重要声明也归为一组，使用特殊性来解决冲突。如果一个重要声明和一个非重要声明冲突，胜出的总是重要声明。甚至是内联样式也无法胜过重要声明。

继承

基于继承机制，样式不仅应用到指定的元素,还会应用到它的后代元素。
当一个声明应用到一个元素的时候，不仅该元素会采用这个声明，这个声明还会沿着数向下转播到后代元素，并一直继续，直到没有后代元素继承这个值为止。
当然，基于常识，例如border，padding这样的框模型属性是不会被继承的，否则。。。。。。就疯了。。。
继承的值完全没有特殊性，所以如果有使用了通配符的0特殊性规则的话，继承的值会被立刻覆盖。

层叠

层叠的规则

按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。
按来源对应用到给定元素的所有声明排序。共有3种来源：创作人员、读者和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有!important标志的读者样式要强于所有其他样式，这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。
如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。