css-tutorial/chapters/003 级联.md

# 级联

*有时候，有多个相同的css规则可以被应用于同一个元素。此时浏览器需要使用级联算法确定最后使用哪一个css规则进行页面渲染。*

css是**级联样式表（Cascading Stylesheets）**。*级联*是解决当多个css规则被同时应用于一个html元素时产生的冲突的一种算法。正因为级联，下面的按钮才会被渲染成蓝色：

```html
<style>
    button {
        color: red
    }
    button {
        color: blue;
    }
<style>

...

<button>This is blue</button>
```

理解级联的目的，就是为了理解浏览器是如何解决此类冲突的。级联算法分为以下四个模块：
- **位置和出现的顺序**：css规则出现的顺序。
- **特征性（具体性 Specificity）**：确定css选择器具有最高匹配权的算法。
- **来源**： css在何时何处生成。它是否是一个浏览器样式或者是浏览器插件添加的样式，又或者是你写的css代码。
- **重要性**：一些css规则具有更高的重要性，特别是包含`!important`值的规则。

## 一.位置和出现的顺序

级联规则在解决css规则冲突时，会考虑css规则出现的位置和顺序。

一般一个页面可能包含多种来源不同的css样式。例如`<link>`标签引入的css文件、`<style>`标签内部的样式或者是定义在元素`style`属性中。

但是只需要记住一点，**位置越靠后的样式一般具有更高的重要性**。假设在html顶部有一个`<link>`样式，html页面底部也有一个`<link>`样式，那么底部的`<link>`样式会在css规则冲突中胜出，因为位置比较靠后。这一点对`<style>`标签内的样式也适用，但是不适用于元素的`style`属性，`style`属性的重要性会比`<link>`和`<style>`标签高。

下面的demo中，按钮显示红色。
<iframe height="300" style="width: 100%;" scrolling="no" title="003 Box_Model 1" src="https://codepen.io/AhCola/embed/JjNpNJj?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/JjNpNJj">
  003 Box_Model 1</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

前面说过，这个规则不适用于内联样式，内联样式就是通过元素style属性定义的样式。内联样式会覆盖所有其他的css，无论这些css出现的位置和顺序，除非css规则的声明值定义为`!important`，`!important`比内联样式的重要性更高。

这个规则同样适用于同一个规则块内，同规则的重复设置。下面的代码，背景色将会显示为`purple`：
```css
.ele {
    background: green;
    background: purple;
}
```

## 二.特征性（具体性 Specificity）

特征性是一种决定哪个css选择器最具体的算法。这里的最具体的意思，你可以看成哪个css权重最高的意思，选择器权重最高的css规则，在规则冲突中将会胜出。

有了特征性算法，即使有多个不同的css规则具有不同的选择器产生了规则冲突，浏览器也可以决定最后使用哪个css规则去渲染页面。

关于特征性，我将在下一节内容进行讲解。你可以学到特征性是如何计算的。

现在你只需要知道，类选择器的特征性高于类型选择器（标签选择器），ID选择器特征性高于类选择器。

因为ID选择器的特征性比较高，所以下面的按钮将会显示为`green`。
```css
button {
    color: blue;
}

.button {
    color: red;
}

#button {
    color: green;
}

...

<button id="button" class="button">This is a green button</button>
```

关于特征性，还需要说明的是，特征性可以累加的。如果一个选择器很复杂，因为权重的累加效果，它的最终权重往往会比较高。例如`a.my-class.another-class[href]:hover`,这样一个选择器，它的css样式一般都会被应用于页面，因为你很难写出比它权重还高的样式了，所以出于这个原因，建议大家在写css时，尽量避免写这种复杂的规则，保持选择器简洁是一个比较好的习惯。

## 三.来源

css来自不同的地方，也会影响是否会在规则冲突中胜出。关于样式的来源的特征性从低到高如下：

1. 用户代理样式：也就是浏览器默认样式。
2. 本地用户样式：一般来源于系统设定，也可以是浏览器插件设定的样式。某些浏览器插件允许用户定义自己的浏览器页面样式。
3. 开发者定义的css规则：指网页开发者写下的css样式。
4. 标记为`!important`的css: 网页开发者写的含`!important`标记的css样式。
5. 含`!important`的本地用户样式：与2来源相同，不过这个css含有`!important`标记。
6. 含`!important`的用户代理样式：与1来源相同，不过这个css含有`!important`标记。

## 四.重要性

并不是所有的css规则都和其他css按照同样方式计算特征性。

不同种类的css规则重要性从低到高依次如下：

1. 普通规则：例如`font-size`、`background`或者`color`。
2. `animation`规则。
3. `!important`规则。
4. `transition`规则。

所以当某些动画规则或者变换规则激活时，它会取代普通规则，进行渲染页面。


## 附：参考资料

谷歌learn css: [The cascade](https://web.dev/learn/css/the-cascade/)

MDN: [Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)


（完）