在这种情况下，“级联”意味着由于多个样式表声明可以应用于特定的HTML片段，因此必须有一种已知的方法来确定哪个特定的样式表规则适用于哪个HTML片段。
使用的规则是通过从更一般的声明到所需的特定规则的级联来选择的。
在这里阅读关于级联的官方W3C规范：https://www.w3.org/TR/css-cascade-4/

当我教CSS的时候，我总是告诉学生“级联样式表”的意思是类似于“* 战斗 * 样式表”。
一个规则告诉你的H3标签是红色的，另一个规则告诉它是绿色的--规则相互矛盾，谁会赢！？样式表死亡竞赛！
好吧，也许这有点夸张，但它比任何级联或继承的概念更适合刚开始的非代码，非编程人员。
我当然会告诉他们，样式表之间互相争斗不是问题，这就是语言设计的方式。

Håkon Wium Lie（CSS的共同创建者）在他的CSS博士论文中将“cascade”定义为“组合多个样式表并解决它们之间冲突的过程”https://www.wiumlie.no/2006/phd/

样式表中的每一条规则都参与了一场类似于cascade的“战争”。Cascade是一个很少使用的词，这就是为什么理解CSS中的“C”是有问题的。
什么是 cascade？
瀑布的意思是瀑布。不是任何瀑布。是有由岩石组成的台阶的瀑布。

现在想象一下，每一个步骤都代表了一个不同位置的规则，可以将样式应用到HTML中。
当水从一块岩石“向下”福尔斯到另一块岩石时，就不可能“向上”流回去，水已经流下来了，就这样。
回到CSS世界。

简化的（还有更多）顺序是：

• 'STEP' 1. Web浏览器规则
• 'STEP' 2.外部规则（链接到外部CSS文件）
• 'STEP' 3. CSS文件中的样式
• 'STEP' 4.内联属性'style'

“级联”算法选择最低的“步骤”作为最重要的步骤。因为这些步骤位于“瀑布”的“最低”位置。无论下面的规则是什么，都会覆盖上面的规则。
假设您有sample.html文件。
在sample.html中，您有一个指向外部CSS文件的链接（步骤2），在其中放置选择器和如下规则：

p
{
  color: red;
}

同时，在sample.html的head标签中，您可以放入：

<style>
p
{
  color: blue;
}
</style>

根据“级联”，最低步骤是步骤nr 3。
这就是为什么你的段落是“蓝色”而不是“红色”。
为什么要在这种情况下用“瀑布”这个词来表示带岩石的瀑布呢？因为当水福尔斯的时候，它会把所有的东西都带到底部。
这有什么关系
因为如果你把sample.html放在外部的CSS文件里面也是：

p
{
  color: red;
  font-weight: bold;
}

您不会删除font-weight: bold;使用：

<style>
p
{
  color: blue;
}
</style>

你只需要改变颜色。之前的“步骤”中的所有其他规则都被“保留”了。这就是它的美妙之处。

你必须从外到内考虑它。如果你有一个规则，它在body标签上，它将“级联”通过每个子标签。如果你把一个规则放在body内的任何标签上，它将采用该规则，等等。所以规则级联通过所有内容，除非被嵌入标签的规则打断。

有一点需要澄清，如果你包含了两个样式表，并且每个样式表都有一个相同的规则，那么最后包含的样式表将获胜，也就是说，级联中最后一个样式表的影响力最大。
(This只是在同一张表中有两个规则的变体-如果所有其他条件都相等，最后一个规则获胜。）
例如，给定

body {
    background:blue;
}

body {
    background:green;
}

则背景将是绿色的。

你可以把CSS处理当作一个包含多个瀑布的瀑布。下面是从上到下的顺序：（较低的可以覆盖较高的中的相同属性。）
1.用户代理声明
1.用户正常声明
1.作者正规宣告
1.作者重要声明
1.用户重要声明
查看更多规格

cascading是从多个origin中选择正确的值。但它与sorting不同。只有不按顺序的东西才需要我们排序。但在CSS中，这些origin有固定的优先级。因此伪代码可能如下所示：

1.初始化值数组;
1.应用第一原点的值;
1.应用第二原点的值，如果值存在则覆盖;
1.……
1.应用来自第N个原点的值，如果值存在则覆盖;
从伪代码中可以看到，它看起来很像一个由几个级联组成的瀑布。

您需要了解的级联和特异性：

1.标记为！important的CSS声明具有最高优先级。
1.但是只使用！important作为最后一个资源。最好使用正确的具体说明-更易于维护的代码！
1.内联样式将始终优先于外部样式表中的样式。
1.包含1个ID的选择器比包含1000个类的选择器更具体。
1.包含1个类的选择器比包含1000个元素的选择器更具体。
1.通用选择器 * 没有特异性值（0，0，0）
1.更多地依赖于特异性而不是选择器的顺序。
1.但是在使用第三方样式表时要依赖于顺序-总是将作者的样式表放在最后。

在选择要应用于HTML元素的CSS样式时，根据解决样式之间冲突的一组“级联”规则，“特殊性”优先于“一般性”：
1.如果没有CSS，HTML将根据浏览器的默认样式显示。

1. CSS * 标签 * 选择器（与HTML标签匹配）覆盖浏览器默认值。
2. CSS class 选择器（带.）覆盖标签引用。
3. CSS ID 选择器（带#）覆盖类引用。
   1.* 内联 * CSS编码成HTML标记覆盖ID、类和标记CSS。
   1.将 ！important 值添加到CSS样式会覆盖其他所有内容。
   1.如果CSS选择器相同，浏览器将合并它们的属性。如果产生的CSS属性冲突，浏览器将选择代码中稍后或最近出现的属性值。
   一个CSS选择器匹配一个 * 更具体 * 的标签、类和/或ID的组合将优先。在以下示例中，第一个将优先于第二个，无论它们在CSS中的出现顺序如何：

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }