码迷,mamicode.com
首页 > Web开发 > 详细

CSS层叠机制

时间:2017-11-04 22:28:42      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:字体大小   结构   伪元素   基于   字体   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!