CSS(Cascading Style Sheet), 直译过来叫 层叠样式表;
层叠是CSS的一个基本特征, 它定义了如何合并来自多个源的属性值的算法;
CSS采用层叠机制把样式组合在一起;
这篇文章着重讲解 CSS层叠规则中, 有关来源排序的一些解析
下面先来讲一下CSS的层叠规则
- 找到匹配特定元素的所有规则
- 按显示权重排序应用到特定元素上的所有声明. 以
!important标记的规则比没有这一标记的权重高 - 按来源排序应用到特定元素上的所有声明. 声明有三个来源:创作人员 、读者、用户代理.
正常情况下, 创作人员编写的样式击败读者提供的样式; 读者样式中以!important标记的声明比其他样式权重高, 包括创作人员编写的样式中以!important标记的声明; 创作人员和读者样式覆盖用户代理的默认样式 - 按特指度排序应用到特定元素上的所有声明. 特指度高的声明具有较高的权重.
- 按声明的前后位置排序应用到特定元素上的所有声明. 样式表或文档中靠后的声明权重较高. 导入的样式表中的声明放到当前样式表中所有声明的前面.
以上是在CSS权威指南第四版所给出的定义
事实上第三条规则还有更多来源, 例如动画和过渡的来源 本篇不做任何讲述
我们来看第三条规则, 也就是本篇要讲述的重点, 第三条规则告诉我们现在有三个来源,分别是创作人员 、读者、用户代理, 下面开始对这个来源进行逐一讲解:
- 创作人员(author): 来自文档的样式文件, 就是我们平常所写的css样式
- 用户代理(user agent): 一些UA(如:浏览器) 自带的一些默认样式, 例如
chrome浏览器默认的a标签下划线和:link的样式; - 读者(user): 用户指定的自定义的样式文件, 一些用户代理允许用户导入自定义的样式文件
- 例如IE浏览器可以通过
Internet选项 -> 外观 -> 辅助功能 -> 用户样式表来指定样式文件 - Chrome可以使用
Stylish扩展来实现 - 总的来说就是用户在
UA上使用的主题或者是自定义的字体或字号
- 例如IE浏览器可以通过
那么,这三者之间的关系是如何呢?
在声明的权重中, 基本要考虑五个方面,下面按照权重从高到低列出:
- 读者提供的样式中以
!important标记的声明 - 创作人员编写的样式中以
!important标记的声明 - 创作人员编写的常规声明
- 读者提供的常规声明
- 用户代理的默认声明
创作人员通常只需要考虑前四点, 在所有来源中,用户代理的默认样式中的特指度(权重)是最低的, 因此, 如果创作人员为锚点定义了规则(例如声明颜色为white), 那么用户代理默认样式会被覆盖掉;
详细可以参考:
