CSS规则层叠时的优先级算法

当多个CSS规则（指选择器和声明的组合）作用于同一元素时，就会遇到规则层叠的问题，也就是优先级的问题。CSS规则层叠时的优先级算法主要分为以下4个级别：

1. 元素样式或行内样式（Inline Style）：元素样式指的是通过HTML元素的style属性定义的样式，行内样式（如在CSS中使用选择器设置）也具有同等优先级；
2. ID选择器（ID Selector）：指通过ID选择器定义的样式，如：#main；
3. 类选择器、属性选择器和伪类选择器（Class Selector、Attribute Selector、Pseudo-class Selector）：指通过class、标签属性或者伪类选择器来设置样式，如：.intro、[href]、:hover；
4. 元素选择器和伪元素选择器（Type Selector、Pseudo-element Selector）：指通过HTML标签名称或样式定义时的双冒号（::）来设置样式，如：div、::before。

在同时应用多个样式规则时，比较优先级的规则如下（按顺序）：

1. 若有!important声明，则设置为最高优先级，直接应用该样式；
2. 将选择器进行加权后比较；
3. 如果前面的样式无法决定优先级，最后则以样式表中样式的先后顺序决定；

在CSS优先级计算中，选择器加权的规则如下：

1. 行内样式（权值：1000）；
2. ID选择器（权值：100）；
3. 类选择器、属性选择器和伪类选择器（权值：10）；
4. 元素选择器和伪元素选择器（权值：1）；
5. 通配符选择器和关系选择器（如+、~、>)，权值为0。

示例一：

<div id="main" class="intro">这是一个Main Div</div>

.intro {
  color: red;
}

#main {
  color: blue;
}

div {
  color: green;
}

答案：最终呈现的字体颜色为蓝色，因为ID选择器的优先级比类选择器高，所以ID选择器对应的blue属性优先生效。

示例二：

<div class="intro" style="color: red;">这是一个Main Div</div>

.intro {
  color: blue;
}

答案：最终呈现的字体颜色为红色，因为行内样式优先级最高，即使外部样式表中的class选择器样式设置为blue，也被覆盖掉了。