标签：字体大小   结构   伪元素   基于   字体   imp   ant   伪类   style   

先简单提提CSS引入方式吧:

1. 行间样式：将样式属性作为元素的style属性的值
2. 内联样式：在head标签内的style标签内写入样式
3. 外部link引入：利用link标签引入外部的样式表
4. import引入：在style标签内通过@import方法引入外部的样式表

层叠（cascading)机制

一个元素的某个特定的样式属性（比如a标签的字体大小）可能来自于行间的style属性，内联样式表，外部引入的样式表，浏览器自定义的样式（UA），或是继承自父元素的样式，但是最终选择其中一个来表示，这个选择的过程便是层叠。

换句话说，就是将来自各种不同途径的样式，通过一定的排序规则，选出优先级最高的那个，赋予给指定元素的指定样式。

而说到排序规则，便要提到接下来的两点：特殊性（specificity）和继承（inheritance）

特殊性

即选择器权重

最开始接触到的那套说法是：！important（无穷）> 行间（1000）> id > class、 伪类（100）> 元素、伪元素（1）>通配符（0）。

后来，有次面试，人问我，我就这么说，人就又问，那么十个元素选择器的权重是不是就和一个class一样了呢？嘿，我就蒙了.....

再后来，还有人跟我说，这个权重是按16进制计算的，可以去试试，257个元素选择器权重比一个class要高.....我还老老实实去试了.....大家不用去试了，不是那么回事

后来仔细读了了CSS权威指南和CSS文档（两处的说法差不多），才知道选择器权重比较是这么回事（important权重高于以下四种，通配符和浏览器自带样式以及继承的权重低于以下四种）：

分为四个部分，如：0 ，0， 0，0 对应的顺序为：行间，ID，class，element

• 如果有行间样式，则第一位加1
• 如果有ID选择器，则第二位加上ID选择器的数量
• 如果有class选择器，则第三位加上class选择器的数量
• 如果有元素选择器，则第四位加上元素选择器的数量

比较规则：
1. 行间样式权重最高
2. 先比较最高位，数字大的权重高。eg:(0,2,0,0)>(0,1,0,0)，（0,1,0,0) > (0,0,3,2)
3. 最高位权重相同，比较下一位，规则同上，数字大的权重高。eg:(0,1,2,0)>(0,1,1,0)
4. 所有位都相同，写在后面的样式覆盖前面的样式

 继承

基于继承机制，样式不仅会应用到指定元素，还会应用到它的后代元素，如果理解了文档树的结构，这一点就很好理解了。

在元素没有指定特定的样式时，它便会继承来自父级的样式

但要注意，并不是所有的属性都能继承，像border

CSS层叠机制

标签：字体大小   结构   伪元素   基于   字体   imp   ant   伪类   style   

原文地址：http://www.cnblogs.com/nananapoli/p/7784644.html