“是什么意思？”；级联'；在CSS中？

CSS中术语“级联”的确切含义是什么？我有不同的看法，所以我在这里问。举个例子会有所帮助。

在这种上下文中，“层叠”意味着，由于不止一个样式表声明可以应用于特定的HTML片段，因此必须有一种已知的方法来确定哪个特定的样式表规则应用于哪个HTML片段

所使用的规则是通过从更一般的声明到所需的特定规则的级联来选择的。选择最具体的声明

CSS文档
CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

p{font size:12pt；}
p{字体大小：14pt；}
我的标题

将以14pt字体呈现p，因为它“更接近”实际元素（从文件顶部加载到文件底部的外部样式表）。如果使用链接的样式表，然后在链接到外部CSS文档后在文档的头部包含一些CSS，“in head”声明将获胜，因为它更接近定义的元素。这仅适用于同等权重的选择器。查看给定选择器的权重的详细描述

---

所有的话，你可以考虑“继承”作为梯级的一部分，为了所有的实际目的。事物从包含元素“层叠”下来。

当我教授CSS时，我总是告诉学生“层叠样式表”的意思类似于“战斗样式表”

一条规则告诉你的H3标签是红色的，另一条规则告诉它是绿色的——这些规则相互矛盾，谁会赢！？样式表死亡匹配

好吧，也许这有点夸张，但这比任何级联或继承的概念都更适合刚起步的非代码、非编程人员

---

当然，我一定要告诉他们，样式表之间的冲突不是问题，这是语言的设计方式。

这是一个用于解决样式表规范中冲突的过程

这基本上是根据CSS中提到的优先顺序完成的冲突解决过程。

Håkon Wium Lie（CSS联合创始人）在其CSS博士论文中将“级联”定义为

---

“组合多个样式表并解决它们之间冲突的过程”

下面的文章完美地回答了您的问题

它是属性应用于特定元素的顺序

---

你必须从外向内思考。如果在body标记上有一条规则，它将“级联”到每个子标记。如果你把一条规则放在身体内的任何标签上，它将采用该规则，依此类推。因此，除非被嵌入标记的规则打断，否则该规则将级联所有内容

您可以将CSS处理视为包含多个级联的瀑布。下面是按顺序从上到下排列的级联：（较低的级联可以覆盖较高的级联中的相同属性。）

用户代理声明

用户正常声明

作者正常声明

撰写重要声明

用户重要声明

更多信息请参见

级联是从多个源中选择正确的值。但它与排序不同。只有一些不正常的东西需要我们去分类。但在CSS中，这些起源具有固定的优先级。因此，伪代码可能如下所示：

初始化值数组

应用第一原点的值

应用2st原点的值，如果该值存在，则覆盖

应用第n个原点的值，如果值存在，则覆盖

---

从伪代码中，您可以看到它非常像几个级联的瀑布。

CSS代表级联样式表。从本质上讲，样式表的层叠会覆盖上一层的等效样式（除非上一层的样式更具体）。因此，我们可以在样式表的开头设置基本样式，适用于我们设计的所有版本，然后在文档中进一步使用媒体查询覆盖相关部分。

层叠意味着分步向下或分步添加。样式表包含用于设置html元素样式的代码。在样式表中编写代码的方式是级联方式。或者简单地说，对于样式表中html页面的每个html元素，层中的背靠背代码构成级联样式表。

一个可能有用的说明。如果您包括两个样式表，并且每个样式表中都有一个具有相同特殊性的规则，那么最后一个样式表将获胜。也就是说，级联中的最后一个影响最大

（这只是将两条规则放在同一张纸上的一种变化——如果其他条件相同，最后一条规则获胜。）

例如，给定

body {
    background:blue;
}

body {
    background:green;
}

---

然后背景将为绿色。

层叠是一种算法，它为每个样式规则分配权重。

---

当几个规则适用时，权重最大的样式优先。

当一个或多个样式应用于同一元素时。CSS执行一组称为级联的规则，该规则评估两个应用样式的特异性强度并确定胜利者，即权重较大的样式规则获胜。如果两个规则具有相同的权重，则该规则获胜应用最后的胜利。

这个答案适用于绝对初学者。如果你想了解这个答案，请阅读我的第二个答案

级联是将不同样式表组合在一起，并在多个规则应用于某个元素时解决不同CSS规则和声明之间冲突的过程。因为您可能已经知道，某些样式属性（如字体大小）的声明可以出现在多个样式表中，也可以出现在单个样式表中多次

要理解级联，必须从CSS解析阶段开始，因为在解析阶段，第一步是解决冲突