剖析CSS选择器优先级，一览解析选择器的等级体系

序言
在前端的面试中，有一道很普遍的题目，就是CSS选择器的优先级。一开始我以为这个东西好像蛮简单的，就是认知里面的类选择器、id选择器和标签，然后就没了。但是殊不知很多时候我们都输给了“我以为”，就像鲁迅所说的，我们都太容易被经验所蒙蔽了。所以呢，我就比较深入地学习了一下这个CSS选择器优先级，并且做了一些整理。

选择器的等级体系
CSS选择器有5种类型，它们按照优先级从高到低排列如下：

内联样式 > id选择器 > class选择器 > 标签选择器 > 通用选择器
这里我们重点关注前三种，因为它们在面试中出现得最多。

专有性
当多个选择器同时作用于一个元素时，专有性更高的选择器将被应用。专有性由三个方面决定：

• 选择器的类型：内联样式的专有性最高，然后是id选择器、class选择器和标签选择器。

• 选择器中ID、类和标签的数量：选择器中ID越多，专有性越高；选择器中类越多，专有性越低；选择器中标签越多，专有性越低。

• 选择器在CSS代码中的位置：出现在后面的选择器专有性越高。
  继承性
  继承性是指元素的样式可以被其子元素继承。继承性由两个方面决定：

• 选择器的类型：内联样式和id选择器不能被继承，class选择器和标签选择器可以被继承。

• 元素之间的关系：子元素只能继承父元素的样式，不能继承兄弟元素或祖先元素的样式。
  级联
  级联是指当多个样式规则同时应用于一个元素时，浏览器会将这些样式规则级联起来，并应用最终的样式。级联的顺序如下：

• 特殊性更高的样式规则优先级更高。

• 出现顺序靠后的样式规则优先级更高。

• 继承性更高的样式规则优先级更高。
  示例
  为了更好地理解CSS选择器优先级，我们来看一个示例。假设我们有以下HTML代码：

<div id="container">
  <div class="header">
    <h1 class="title">这是标题</h1>
  </div>
  <div class="content">
    <p>这是段落</p>
  </div>
</div>

然后我们有以下CSS代码：

#container {
  background-color: red;
}

.header {
  background-color: blue;
}

.title {
  color: white;
}

p {
  color: black;
}

根据CSS选择器优先级的规则，我们可以计算出每个元素的最终样式如下：

#container {
  background-color: red;
}

.header {
  background-color: blue;
}

.title {
  color: white;
}

p {
  color: black;
}

因此，#container元素的背景颜色为红色，.header元素的背景颜色为蓝色，.title元素的颜色为白色，p元素的颜色为黑色。

结论
CSS选择器优先级是一个非常重要的概念，它决定了元素的最终样式。在面试中，经常会考到CSS选择器优先级的问题，所以大家一定要掌握好这个概念。

希望这篇文章对您有所帮助！