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

层叠 知识图谱

CSS本质

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

什么是层叠

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

层叠规则

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

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

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

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

术语解释

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qxanpk2d-1659094903394)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c61a9e683f8d459aa40b9b6d6fcba415~tplv-k3u1fbpfcp-watermark.image?)]

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

样式表的来源

作者样式表

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

用户代理样式表

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

用户样式表

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

1. 用户代理样式

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

2. !important 声明

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

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

理解优先级

1.行内样式

在HTML 的 style 属性直接写样式，优先级最高，覆盖任何来自样式表或者<style>标签的样式。

2. 选择器优先级

有3大类选择器。他们有不同的优先级。

如果选择器的 ID 数量更多，则它会胜出（即它更明确）。
如果 ID 数量一致，那么拥有最多类的选择器胜出。
如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。

口诀是遇同级比数量，遇不同级，找高级，全一样，看先后，后者胜。

3. 优先级标记

一个常用的表示优先级的方式是用数值形式来标记，通常用逗号隔开每个数。

“1,2,2” 表示选择器由 1 个 ID、2 个类、2 个标签组成。

有3数和4个数的写法。4个数的写法多了一个数表示代表一个声明是否 是用行内样式添加的。用0,1表示。

源码顺序

如果两个声明的来源和优先级相同，其中一个 声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。

a链接属性书写顺序

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: red;
}

记忆：LV好啊（lvha）

两条经验法则

1.能不用!important就不用。
2.在选择器中不要使用 ID