这次彻底搞定CSS层叠、优先级!

层叠 知识图谱

这次彻底搞定CSS层叠、优先级!_第1张图片

CSS本质

CSS 本质上就是声明规则,即在各种条件下,我们希望产生特定的效果。浏览器会根据我们书写的规则去决定如何渲染页面。

什么是层叠

层叠指的就是css中的一系列规则。决定了如何解决冲突,是 CSS 语言的基础。

层叠规则

这些规则就是拿来解决冲突的。

(1) 样式表的来源:样式是从哪里来的,包括你的样式和浏览器默认样式等。

(2) 选择器优先级:哪些选择器比另一些选择器更重要。

(3) 源码顺序:样式在样式表里的声明顺序

术语解释

这次彻底搞定CSS层叠、优先级!_第2张图片

@规则(at-rules)是指用“@”符号开头的语法。比如@import 规则或者@media 查询

样式表的来源

作者样式表

我们自己写的样式表就是作者样式表

用户代理样式表

浏览器有一个默认的样式表,也就是用户代理样式表。

用户样式表

这是第三种来源,它的优先级介于 用户代理样式表和作者样式表之间。用户样式表很少见,并且不受网站作者控制,因此 这里略过

1. 用户代理样式

浏览器先应用用户代理样式后才会应用作者样式表,后者会覆盖前者。

2. !important 声明

标记了!important 的声明会被当作更高优先级的来源,因此总体的优先级按照由高到低

优先级分别是 !important > 作者样式表 > 用户代理样式表

理解优先级

1.行内样式

在HTML 的 style 属性直接写样式,优先级最高,覆盖任何来自样式表或者