级联

Created: November-22, 2018

级联和特异性一起用于确定 CSS 样式属性的最终值。他们还定义了解决 CSS 规则集中冲突的机制。

CSS 加载订单

按以下顺序从以下来源读取样式：

用户代理样式表（浏览器供应商提供的样式）
用户样式表（用户在其浏览器上设置的附加样式）
作者样式表（此处作者是指网页/网站的创建者）
- 也许一个或多个 .css 文件
- 在 HTML 文档的 <style> 元素中
内联样式（在 HTML 元素的 style 属性中）

浏览器将在渲染元素时查找相应的样式。

如何解决冲突？

当只有一个 CSS 规则集试图为元素设置样式时，则没有冲突，并且使用该规则集。

当发现具有冲突设置的多个规则集时，首先使用特定规则规则，然后使用级联规则来确定要使用的样式。

示例 1 - 特异性规则

.mystyle { color: blue; }  /* specificity: 0, 0, 1, 0 */
div { color: red; }        /* specificity: 0, 0, 0, 1 */

<div class="mystyle">Hello World</div>

文字是什么颜色的？（悬停看答案）

蓝色

首先应用特异性规则，具有最高特异性的规则获胜。

示例 2 - 具有相同选择器的级联规则

外部 css 文件

.class {
  background: #FFF;
}

内部 css（在 HTML 文件中）

<style>
.class {
  background: #000;
}
<style>

在这种情况下，如果你有相同的选择器，则级联启动，并确定最后一个加载获胜。

示例 3 - 特殊性规则之后的级联规则

body > .mystyle { background-color: blue; }   /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; }  /* specificity: 0, 0, 1, 1 */

<body class="otherstyle">
  <div class="mystyle">Hello World</div>
</body>

背景是什么颜色的？

红色

应用特异性规则后，蓝色和红色之间仍然存在冲突，因此级联规则应用于特异性规则之上。级联查看规则的加载顺序，无论是在同一 .css 文件内还是在样式源集合中。最后一个加载会覆盖任何早期版本。在这种情况下，.otherstyle > div 规则胜利。

最后一点

选择器特异性始终优先。
样式表订单打破关系。
内联样式胜过一切。