深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）

标题中的 Cascading 亦可以理解为级联。

进入正文，这是一个很有意思的现象。可以直接跳到总结一下部分，看完再回过头来阅读本文。

引子

假设我们有如下结构：

<p class="txt" style="color:red">123456789</p>

上面的 p 标签只有一个内联 CSS，很明显，在没有其他样式的干预下，文本 .txt 的颜色肯定就是红色的。

如果此时，我们希望改变 .txt p 标签元素的内容文字的颜色，但是不能去修改内联 CSS，只能通过样式文件去实现，像是这样：

.txt {
    color: green;
}

嗯。稍微对 CSS 有点了解的同学都会知道，上面的 CSS 文件设置的样式不会生效，因为内联样式比上述 CSS 中的样式优先级要更高。

上述这种说法不是很严谨，下文会细说。

OK，有同学就会说了，这简单，在 CSS 样式文件中添加 !important 后缀即可。像是这样：

.txt {
    color: green!important;
}

如此操作之后，文本的颜色确实变成了绿色，因为在 CSS 文件中带 !important 后缀的规则优先级大于内联样式中同个但不带 !important 的样式。

内联样式的 !important 与样式表中的 !important

问题来了。

如果在内联样式中，我们也给加上 !important 会怎么样呢？

<p class="txt" style="color:red!important">123456789</p>　

.txt {
    color: green!important;
}

此时，内联的 !important 优先级更高，文本表现为红色。

问题又来了，那如果此时我们无法修改内联样式，只能修改样式表，有办法能覆盖内掉内联的 !important 吗？

animtion 的威力（Chromium 内核）

哦吼，还真有一种看似是奇技淫巧，实则不是的方法。让我们康康：

<p class="txt" style="color:red!important">123456789</p>

我们给 .txt p 元素新增一个动画，改变它的颜色。

.txt {
    animation: colorGreen 2s infinite;
}

@keyframes colorGreen {
    0%,
    100% {
        color: green;
    }
}

这里新增了一个无限循环的动画，且动画初始状态及结束状态都赋予 color: green。甚至，我们都没有在规则后缀添加 !important。

神奇的事情发生了，文本的颜色变成了绿色，成功的覆盖了内联的 <p class="txt" style="color:red!important"> 的红色样式。

CodePen Demo -- the priority of CSS Animation

常见 CSS 优先级误区

严格来说也不算是误区（错误），但是这种说法不够严谨。

通常我们聊到 CSS 规则的优先级，第一时间都会想到这个表，也就是给不同的 CSS 规则赋予不同的权重：

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千四位数的四个位数：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000
百位：选择器中包含ID选择器则该位得一分
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分
个位：选择器中包含元素、伪元素选择器则该位得一分

总的来说是规则是：

内联 > id 选择器 > 类/属性/伪类选择器 > 标签元素/伪元素

上面的规则没有问题的。但是，注意，这里仅仅考虑的是页面作者定义的样式的优先级。首先，它并且没有包含 !important 规则。

其次，对于决定一个 CSS 样式的最终表现而言，还有非常重要的另外一个概念 -- 层叠。

Cascading -- 层叠

层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。

那么什么所谓的多个源又表示什么呢？下面是影响层叠的五个源：

浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式
网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即页面主题，可以理解为页面作者样式
读者，作为浏览器的用户，可以使用自定义样式表定制使用体验，可以理解为用户样式
动画（Animation），指使用 @Keyframes @规则定义状态间的动画，动画序列中定义关键帧的样式来控制CSS动画序列
过渡（Transition）

CSS动画与层叠（重点）

CSS动画，指使用@Keyframes @规则定义状态间的动画。

这里有个重点：关键帧不参与层叠。

这意味着在任何时候 CSS 都是取单一的 @Keyframes 的值而不会是某几个@Keyframe的混合。同时仍应注意用 @Keyframes（@规则）定义的值会覆盖全部普通值，但会被 !important 的值覆盖

这里我其实没弄很明白，这里的意思就是动画过程中的每一帧，决定元素的样式表现只取决于单一的 @Keyframes 的值，但是规范和 MDN 文档中都明确表明，动画 @Keyframes 中的值仍会被 !important 规则覆盖，但是实际测试结果，在 Chromium 内核下，动画 @Keyframes 中的值层叠顺序高于 !important 规则。