标签:字体大小 结构 伪元素 基于 字体 imp ant 伪类 style
先简单提提CSS引入方式吧:
1. 行间样式:将样式属性作为元素的style属性的值
2. 内联样式:在head标签内的style标签内写入样式
3. 外部link引入:利用link标签引入外部的样式表
4. import引入:在style标签内通过@import方法引入外部的样式表
一个元素的某个特定的样式属性(比如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. 行间样式权重最高
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
标签:字体大小 结构 伪元素 基于 字体 imp ant 伪类 style
原文地址:http://www.cnblogs.com/nananapoli/p/7784644.html