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重置样式表，将公共属性值强制为已知状态。
- 网页的作者定义了文档的样式。这些是最常见的样式表。大多数时候，他们中的一些人是被定义的，他们制作网站的外观和感觉 - 它的主题。
- 阅读器，浏览器的用户，可以有一个自定义样式表来定制其体验。
虽然样式表来自这些不同的来源，但它们在范围上重叠：级联算法定义它们如何交互。
级联顺序
级联算法确定如何找到应用于每个文档元素的每个属性的值。
- 它首先过滤来自不同来源的所有规则，以仅保留适用于给定元素的规则。这意味着规则的选择符与给定元素相匹配，哪些是适当媒体规则的一部分。
- 然后根据它们的重要性对这些规则进行分类，也就是说，它们是否跟随
!important，以及它们的起源。级联按升序排列，这意味着!important来自用户定义样式表的值优先于源自用户代理样式表的正常值：Origin重要性 用户代理正常 用户正常 作者正常 CSS动画见下面 作者!important用户!important用户代理!important - 在平等的情况下，价值的特殊性被认为是选择其中一种。
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: 0margin-left: 3pxmargin-left: 1px最后一个被忽略（在屏幕上），并且两个第一个具有相同的选择器，因此具有相同的特征：它是最后选择的最后一个：
margin-left: 3px请注意，用户CSS中定义的声明虽然具有较高的特定性，但未选择，因为在特定性算法之前应用了级联算法。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
