【前端基础系列】CSS篇-选择器的优先级

在前端面试中，经常会遇到CSS选择器的问题三连：

1. 说一下CSS的选择器有哪些

2. 优先级是怎样的

3. 权重计算方式

我们在上一篇 【前端基础系列】CSS篇-常用选择器介绍[1] 中已经对问题1进行了详细的解答，今天就来给大家介绍选择器的优先级和权重计算方式。

优先级是什么？有什么用？

先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？

其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

换种说法，优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器 中的 每一种选择器类型的数值 决定。

总结一下：

• 权重决定了你css规则怎样被浏览器解析直到生效，css权重关系到你的css规则是怎样显示的。

• 当很多的样式被应用到某一个元素上时，权重决定哪种样式生效。

• 每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。

• 如果两个选择器同时作用到一个元素上，权重高者生效。

权重的计算规则

接着介绍权重的计算规则：

• 第一优先级：!important会覆盖页面内任何位置的元素样式

• 内联样式，如style="color: green"，权值为1000

• ID选择器，如#app，权值为0100

• 类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010