CSS级联与优先级

• 级联

就是CSS声明前加了限制条件
ps:善用 CSS 的级联属性

比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级

比如：下面这段代码结果红色。

<h1 class="A B">标题颜色<h1>

h1.B{ color: red }
  .A{ color: blue }

• 优先级

优先级就是分配给指定的CSS声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明的规则将会覆盖先前声明的规则，并被应用到元素上。

优先级从高至低：

• 内联样式：总会覆盖外部样式表的任何样式(style=”font-weight:bold”)
• ID选择器（例如：#example）
• 伪类选择器（例如：:hover）
• 类选择器 (例如：.example)
• 属性选择器（例如：[type=”radio”]）
• 元素选择器（例如：p）
• 伪元素选择器（例如：::before）

---

优先级的计算：

• ID选择器：100
• 类选择器：10
• 元素选择器：1

---

所以上述代码h1.B{ color: red }的优先级为11，.A{ color: blue }的优先级为10，最终优先级高的声明将会应用于元素上。

• !important 规则例外

当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明,。尽管技术上 !important 与优先级毫无关系，但是它们之间直接相互影响。使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

例如：

h1.B{ color: red !important}
  .A{ color: blue !important}

结果：

但是如果两个CSS声明有相同的优先级，则最后声明的CSS总会覆盖前面的声明。例如：

.B{ color: red !important}
.A{ color: blue !important}

结果：

---

参考文章https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity