概述

层叠就是对样式的层叠。是某种样式在样式表中逐层叠加的过程。让浏览器对某个标签特定属性值的多个来源,最终确定使用那个值。层叠是整个CSS的核心机制。

HTML文档样式的来源

1.浏览器默认样式,每个浏览器本身就有一套默认的样式

2.用户样式,这对于视障用户很重要

3.作者样式。也就是Web开发者设计的样式

浏览器层叠各个样式的顺序:

三.CSS层叠机制-LMLPHP

浏览器会按照上面的顺序,依次检查每个样式的来源,并更新相关标签的设定,当整个检查更新结束后,再将每个标签以最终设定的样式显示出来

层叠规则

规则一:找到应用给每个元素和属性的所有声明。

检查每一条CSS规则,并标记出受到影响的HTML标签

规则二:按照顺序和权重排序

浏览器依次检查5个来源,匹配并且更新有定义的值,声明也可以通过!important增加权重,例如

a{font-size: 30px;color: red !important;},这里a的color值会始终被设置成red。而忽略5个样式表

规则三:计算选择符特指度进行排序

特指度(specificity)即一条规则有多么明确,选择符的特指度由它所包含多少标签、类名和id决定

规则四:顺序决定权重

在特指度相同的情况下,后声明的规则胜出

补充: CSS特指度的计算规则

CSS选择符的特指度,由它选择符中包含标签的多少、class和id决定

特指度的计算

计分公式:“ I-C-E ” 三个字母用“ - ”分隔符组成

①选择符中有一个id,  "  I  " 位置加1

②选择符中有一个class,“C”  位置加1

③选择符中有一个标签(元素),“ E ” 位置加1

④得到一个“三位数”,这并非真正意义上的三位数

按选择符照特指度计算规则,下面是特指计算的例子

p{font-size:20px;}                                         特指度001
p.largetext{font-size:30px;} 特指度011
p#largetext{font-size: 40px;} 特指度101
body p#largetext{font-size:50px;} 特指度102
body p#largetext ul.mylist{font-size:60px;} 特指度113
body p#largetext ul.mylist li{font-size:70px;} 特指度114

查理版简单层叠要点—《CSS设计指南》一书

规则一:包含id的选择符胜过包含class选择符,包含class选择符胜过包含标签的选择符

规则二:如果几个不同来源样式都为同一标签的同一属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式,在链接样式中,如果特指度相同,后声明胜过先声明

规则三:手动设定样式胜过继承样式

05-11 16:04