前言

无论你是刚学习前端开发的新手，还是即将面试前端的求职者，或者是已经工作多年的前端开发者，应该都知道：前端开发有三大模块，分别为HTML、CSS、JavaScript……HTML和CSS作为静态语言，相对来说难度较小一点。但是如果你不深入研究，流于表层，则很难会有大的提升。

最近看到有很多朋友在面试阿里前段时，就被卡在了CSS问题上，说实话，CSS难吗？并不难，但是当你项目太大，CSS样式表越来越大越来越多时，那么处理起来就是一个非常棘手的问题了。所以，CSS的问题在理解优先级、层叠和继承这三个问题上显得尤为重要。

本文就借此机会抛砖引玉，从一个多年前端开发者经验的角度，来不完全地介绍下这三个问题。望后续的新手学习和面试工作的时候，避免踩一些坑。

CSS样式来源

浏览器在渲染DOM树的时候，CSS都有哪些来源呢？这是我们首先必须要知道的问题：

从大的方面，有这三个来源：

• 用户样式
• 作者样式
• 浏览器样式

用户样式：即浏览器用户对页面自定义的样式，作为开发者而言，我们无法介入也无需多关注，但我们必须知道有这个来源的存在。

作者样式：即我们前端开发者自己写的样式，其中又有以下三个分支来源：

• 外部样式表
• 内嵌样式表（写在文档<style>元素里面）
• 内联样式表（即直接写在元素style属性里面）

浏览器样式：当浏览器渲染元素时，找不到以上来源的样式时，就会使用浏览器默认样式

继承

继承很好理解，即从祖先元素上继承一些属性的样式。有这样一条经验可参考：即与外观相关的属性会被继承（如字体、颜色、字号等等）；与布局和尺寸相关的不会被继承（如定位、尺寸等等）。

由于这不是我们本文主要讲的内容，不做过多赘述。

层叠

层叠也好理解，就像盖楼一样，渲染一个元素时，浏览器会从上到下查看CSS规则，遇到冲突的规则，在优先级相同时，会应用后面的样式。在优先级不相同时，会应用优先级高的样式。

举个例子：

<p>我是什么颜色？</p>
<style>
p{color:red;}
p{color:green;}
</style>

上面这个例子，p元素的颜色会是绿色，因为下面两条冲突规则优先级相同，遵循后来者居上。

<p class=".p">我是什么颜色？</p>
<style>
.p{color:red;}
p{color:green;}
</style>

上面这个例子，p元素的颜色会是红色，因为下面两条冲突规则优先级不相同，.p的选择器优先级更高。

优先级

在我们充分理解层叠后，才来探讨优先级的问题。可以说，这是绝大多数人踩坑的地方。

浏览器遇到冲突规则的时候，则会利用优先级来解决冲突。

浏览器会计算一个优先级的三位数：

a-b-c的形式：

必须充分理解的是：

1-0-0的优先级是高于0-10000-10000的，即只有当a相同的时候，才会去继续比较b，当a和b都相同的时候，才会去比较c。

计算方法：

1. a位代表id选择器，有一个id，则累计1
2. b位代表类选择器、属性选择器或者伪类，有一个累计1
3. c位代表元素、伪元素选择器，有一个累计1

浏览器查询顺序

浏览器查询顺序如下（只说作者样式）：

对于普通样式：

1. 是否有元素内联样式（即元素style属性里面的），如有则优先应用；如无，则跳转2
2. 是否有内嵌样式（即写在<style>元素里面的），如有则优先应用；如无，则跳转3
3. 是否有外部样式表（即使用<link>元素引用的），如有则优先应用；如无，则跳转4
4. 浏览器默认样式（由浏览器自己指定样式，每个浏览器制造商可能有不同的差异）

以上我们说的都是普通样式，但是有下面一个例外情况：

!important重要样式

示例代码：

<p>我是什么颜色？</p>
<style>
.p{color:red;}
p{color:green !important;}
</style>

这个比上面层叠中的第二个例子一样，只不过多了一个!important关键字，结果却完全不一样。

当浏览器遇到!important关键字时，无论此样式定义在外部样式表或者是内嵌样式还是内联样式中，则浏览器会优先应用，抛弃前面的层叠和优先级规则。

总结：

浏览器应用样式来源及优先级顺序：

用户重要样式（!important）>作者重要样式（!important）>作者普通样式>用户普通样式

此文不完全详细的进行了剖析，仅做抛砖引玉之用，如有不对，欢迎在下方评论区指正……