共计 1273 个字符,预计需要花费 4 分钟才能阅读完成。
CSS 层叠(Cascading)指的是某个元素会依据款式规定的优先级来设置某个元素的外观。
层叠款式的优先级次要有三方面:
- 依据款式域判断,是用户代理款式(user agent stylesheet),还是咱们本人写的款式;是否存在
!important
标识; - 依据元素款式属性判断,是否是写在元素行内的 style 属性中;
- 依据选择器判断。
用户代理款式是什么?
基本上所有浏览器都有默认的款式,例如 <h1>-<h6>
,<p>
标签都有默认的上边距和下边距,这是由浏览器默认设置的,所以叫用户代理款式。
如果一个元素身上有很多的款式规定,那么到底该利用哪一条呢?
首先,浏览器会先判断以后款式是用户代理款式还是咱们本人写的款式,这两者中,咱们本人写的款式优先级要高,所以如果同一个元素上存在雷同的款式规定,咱们本人写的会笼罩浏览器默认款式;
而后,判断以后款式规定是否存在 !important
标识,如果存在,阐明它的优先级高,则利用该款式;
其次,判断以后款式规定是否是行内款式,如果是行内款式,它的优先级高于其余款式(然而除了有 !important
标识的除外);
而后,依据选择器的优先级来判断,选择器的优先级程序从大到小是:ID 选择器、类选择器、属性选择器、伪元素选择器、标签选择器;
最初,依据选择器的个数判断,如果 ID 选择器的个数都雷同,则判断类选择器的个数,如果又都雷同,则判断属性,伪类元素的个数,如果最初失去的优先级一样,则依据代码程序,后来者居上,后者笼罩前者。
上面是款式层叠的规定,依据优先级大小降序排列:
- 是否是行内款式,并且有
!important
标识; - 是否具备
!important
标识; - 是否具备 ID 选择器;
- 是否具备类选择器;
- 是否具备属性、伪元素选择器;
- 是否具备标签选择器;
- 是否具备通配符选择器;
- 用户代理款式;
- 继承款式。
继承(Inheritance)
继承指的是元素能够通过继承先人元素的款式给本身,然而并不是所有款式都能够继承。
文本能够继承的款式
这些文本属性能够通过继承实现:color,font,font-size,font-weight,font-variant,font-style,font-family,line-height,word-spacing,white-space,letter-spacing,text-transfrom,text-indent,text-align。
其余可继承的款式
列表元素的局部款式能够通过继承实现:list-style,list-style-type,list-style-position,list-style-image。
表格元素的边框属性:border-collapse,border-spacing。
tips:
平时咱们在开发中,最好少用 !important
标识和 ID 选择器,应该它们的优先级很高,如果咱们前面想要笼罩他们的款式则必须用雷同的形式持续增加 !important
或 ID 来实现,这种形式不利于保护。咱们能够通过类选择器、款式层叠规定来笼罩。
参考:《CSS in Depth》Keith J. Grant 著