Cascade

级联是CSS的一个基本特征。它是一种定义如何组合来自不同来源的属性值的算法。它的名字就是CSS的核心：层叠样式表。

CSS实体参与级联

只有CSS声明（即属性/值对）参与级联。这意味着包含声明以外的实体的规则（例如@font-face包含描述符）不参与级联。在这种情况下，只有整个规则参与级联; 这里是由其font-family描述符标识的@ font-face 。如果@font-face定义了几个具有相同描述符的描述符，则只@font-face考虑整体上最合适的描述符。

虽然在规则中包含大多数的声明-比如那些@media，@documents或@supports-参加级联，包含在声明中@keyframes没有。与之类似@font-face，通过级联算法仅选择规则作为整体。

最后注意@import并@charset遵守特定的算法，不受级联算法的影响。

Origin of CSS declarations

CSS级联算法想要选择CSS声明来为CSS属性设置正确的值。CSS声明来自不同的来源：

• 浏览器有一个基本样式表，为任何文档提供默认样式。这些样式表被命名为用户代理样式表。一些浏览器使用实际样式表来执行此操作，而其他浏览器使用代码模拟它们，但这两种许用户修改用户代理样式表。尽管HTML规范设置了一些用户代理样式表的约束，但浏览器仍然有很大的自由度：这意味着从一个浏览器到另一个浏览器存在显着差异。为了简化他们的开发并降低工作的基础，Web开发人员经常使用CSS重置样式表，将公共属性值强制为已知状态。
• 网页的作者定义了文档的样式。这些是最常见的样式表。大多数时候，他们中的一些人是被定义的，他们制作网站的外观和感觉 - 它的主题。
• 阅读器，浏览器的用户，可以有一个自定义样式表来定制其体验。

虽然样式表来自这些不同的来源，但它们在范围上重叠：级联算法定义它们如何交互。

级联顺序

级联算法确定如何找到应用于每个文档元素的每个属性的值。

1. 它首先过滤来自不同来源的所有规则，以仅保留适用于给定元素的规则。这意味着规则的选择符与给定元素相匹配，哪些是适当媒体规则的一部分。
2. 然后根据它们的重要性对这些规则进行分类，也就是说，它们是否跟随!important，以及它们的起源。级联按升序排列，这意味着!important来自用户定义样式表的值优先于源自用户代理样式表的正常值：Origin重要性 用户代理正常 用户正常 作者正常 CSS动画见下面 作者!important 用户!important 用户代理!important
3. 在平等的情况下，价值的特殊性被认为是选择其中一种。

CSS动画和级联

CSS动画，使用@keyframesat-rules定义状态之间的动画。关键帧不会级联，这意味着CSS在任何时候都从一个单独获取值，@keyframes并且从不混合其中的几个值。

当几个关键帧合适时，它会选择最重要的文档中定义的最新版本，但从未将所有关键帧合并在一起。

还要注意，@keyframesat-rules 内的值会覆盖所有正常值，但会被!important值覆盖。

例

用户代理CSS：

li { margin-left: 10px }

Author CSS 1:

li { margin-left: 0 } /* This is a reset */

Author CSS 2:

@media screen {
  li { margin-left: 3px }
}

@media print {
  li { margin-left: 1px }
}

User CSS:

.specific { margin-left: 1em }

HTML:

<ul>
  <li class="specific">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
</ul>

在这种情况下，内部申报li和.specific规则应适用。没有声明被标记为!important优先顺序是用户样式表或用户代理样式表之前的作者样式表。

所以有三个声明在竞争中：

margin-left: 0

margin-left: 3px

margin-left: 1px

最后一个被忽略（在屏幕上），并且两个第一个具有相同的选择器，因此具有相同的特征：它是最后选择的最后一个：

margin-left: 3px

请注意，用户CSS中定义的声明虽然具有较高的特定性，但未选择，因为在特定性算法之前应用了级联算法。