css-层叠
层叠
对同一个元素应用多个表现规则时,规则中可能会包含冲突的声明,那么那种表现规则会生效,这取决于声明中的一系列规则,层叠指的就是这一系列的规则,它决定了如何解决多种表现规则声明冲突的问题,是css语言的基础。(css里的c 代表cascade 层叠)
规则
当声明冲突时,层叠会依据三种条件解决冲突。
1. 样式表的来源
2. 选择器优先级
3. 源码的顺序
样式表的来源
样式表的来源有两种:
- 用户代理样式:浏览器默认样式
- 作者样式:自己的样式表
用户代理样式表优先级低,你的样式会覆盖他们。
样式来源规则有一个例外:!important 声明。
例:color: black !important;
标记了!important的声明会被当做更高优先级的来源。
样式表来源中的优先级高低
- 作者的!important
- 作者
- 用户代理
选择器的优先级
- 行内样式
- id选择器
- 类选择器
- 标签选择器
(选择器中如果类型相同,则进行数量比较,如果数量相同,则比较下一级)
(一个常用的表示优先级的方式是用数值星期来标记,通常用逗号隔开每个数,)
选择器 | ID | 类 | 标签 | 比较 |
---|---|---|---|---|
html body header h1 | 0 | 0 | 4 | 0,0,4 |
body header .page-header h1 | 0 | 1 | 3 | 0,1,3 |
.page-header .title | 0 | 2 | 0 | 0,2,0 |
#page-title | 1 | 0 | 0 | 1,0,0 |
源码的顺序
如果两个声明的来源和优先级相同,其中一个声明在样式表中出现较晚,或者位于页面较晚引入的样式表中,则该声明胜出。
层叠的思考:关于a标签伪类声明顺序
a标签共有四种状态
- :link 普通的、未被访问的链接
- :visited 用户已访问的链接
- hover 鼠标指针位于链接的上方
- :actived 在鼠标点击的同时
基于层叠规则 a标签样式声明取决于源码顺序
其过程可分为:标签未被点击->标签被点击
- link
- visited 访问过后其样式应发生改变 固位于link后
- hover 鼠标防止其上时要出现hover效果 要覆盖link 和visited 样式固位于visited后
- actived 鼠标放置到其上时要保证不会被别的样式覆盖 固在hover后