css-层叠

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标签样式声明取决于源码顺序
  其过程可分为：标签未被点击->标签被点击

1. link
2. visited 访问过后其样式应发生改变 固位于link后
3. hover 鼠标防止其上时要出现hover效果 要覆盖link 和visited 样式固位于visited后
4. actived 鼠标放置到其上时要保证不会被别的样式覆盖 固在hover后