CSS中的“层叠”是什么意思？

CSS中“层叠”一词的确切含义是什么？我有不同的看法，所以我在这里问。一个例子会有所帮助。

在这种情况下，“级联”意味着，由于一个样式表声明可以应用于一个特定的HTML片段，因此必须有一种确定哪种特定样式表规则应用于哪个HTML片段的已知方法。

通过从更一般的声明向下层叠到所需的特定规则来选择所使用的规则。选择最具体的声明。

在教授CSS时，我总是告诉学生“级联样式表”的含义类似于“战斗样式表”。

一条规则告诉您的H3标签为红色，另一条规则告诉您的H3标签为绿色–规则相互矛盾，谁将获胜！样式表死亡竞赛！

也许这有点夸张，但是对于刚开始使用代码的非代码，非编程人员而言，它比任何级联或继承概念都更容易接受。

当然，我确实要告诉他们，样式表相互竞争不是问题，这就是语言的设计方式。

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

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

这是将属性应用于特定元素的顺序。

http://www.blooberry.com/indexdot/css/topics/cascade.htm

您必须从外面开始考虑它。如果您在body标签上有一条规则，它将在所有子标签中“级联”。如果将规则放在主体内的任何标签上，它将采用该规则，依此类推。因此，该规则会级联遍历所有内容，除非被嵌入式标签的规则打断。

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

1. 用户代理声明
2. 用户正常声明
3. 作者正常声明
4. 发表重要声明
5. 用户重要声明

在规格中查看更多

该级联是选择来自多个来源的权值。但这与排序不同。只有不需要的东西才需要我们进行排序。但是在CSS中，这些起源具有固定的优先级。因此，伪代码可能如下所示：

1. 初始化值数组；
2. 应用来自第一个起点的值；
3. 应用来自第二原点的值，如果该值存在，则覆盖；
4. ...
5. 应用来自第N个起点的值，如果值存在则覆盖；

从伪代码中可以看到，它看起来像是几个级联的瀑布。

一种澄清可能会有所帮助。如果您包含两个样式表，并且每个样式表中都有一条规则具有相同的特异性，则其中一个包含最后的胜利。IE在级联中的影响最大。

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

例如，给定

body {
    background:blue;
}

body {
    background:green;
}

那么背景将变为绿色。

这个答案是给绝对的初学者的。如果您需要此答案的概述，请阅读我的第二个答案。

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

要了解级联，您必须从CSS解析阶段开始，因为在解析阶段，第一步是解决冲突的CSS声明，而第二步是处理最终的CSS值。

现在CSS也可以来自不同的来源。最常见的一种是我们开发人员编写的CSS。我们放在样式表中的这些声明称为作者声明。另一个来源可以是用户声明，它是来自用户的CSS。例如，当用户在浏览器中更改默认字体大小时，即用户CSS，最后但并非最不重要的是存在默认浏览器声明。

例如，如果我们在链接的HTML中放置一个定位标记，然后根本不设置样式，则通常将其显示为蓝色文本并带有下划线。之所以称为用户代理CSS，是因为它是由浏览器设置的。因此，级联组合了来自所有这些不同来源的CSS声明，但是当应用多个规则时，级联实际上如何解决冲突？

好吧，它的工作是着眼于重要性，选择器的特异性以及冲突声明的源顺序，以确定哪一个优先，以及这是如何工作的。首先，级联首先根据源中声明的位置给出不同重要性的冲突声明开始。最重要的声明是标记有重要关键字的用户声明。

第二重要的声明是标记为重要的作者声明。第三，普通的作者声明，然后是普通的用户声明，最后是最不重要的声明，是默认的浏览器声明，这在很大程度上可以使我们轻松地覆盖默认情况下来自浏览器的这些声明。

现在很多时候，我们的作者样式表中只有一堆相互冲突的规则，而没有任何重要的关键字。这实际上是最常见的情况，在这种情况下，所有声明都具有完全相同的重要性。现在，在这种情况下会发生什么？在这种情况下，级联的作用是计算和比较声明选择器的特殊性，这就是它的工作方式。

内联样式具有最高的特异性，其次是ID，然后是类，伪类和属性选择器，最后是最不特定的元素和伪元素选择器。因此，当我们有冲突的声明具有与上一张幻灯片相同的重要性时，我们会根据我刚刚向您展示的优先级来计算它们的选择器特异性，但是让我们看看如何通过一个小例子实际计算特异性，这总是最好的，正确的。

在上面的示例中，所有这些声明都具有相同的重要性，因为它们都是作者声明。因此，让我们计算它们的选择器特异性，以查明背景色是蓝色，绿色，紫色还是黄色，这就是我们的方法。实际上，特异性不仅仅是一个数字，而是我之前向您展示的四个类别中每个类别的一个数字。内联样式，ID，类，伪元素和属性，最后是元素，对于每个元素，我们计算选择器中的出现次数。

因此，在选择器一中，我们当然没有任何内联样式，因为内联样式必须在HTML中编写，此处不是这种情况，因此为零。我们这里也没有ID，因此它又是零，但我们确实有一个类，即按钮类。因此，对于类类别，我们有一个，最后，这里没有元素选择器，所以那个也为零。选择器特异性为零，零，一，零。

现在，让我们将其与其他进行比较。下一个也不是内联样式，因此第一个为零。现在，这里我们实际上有一个用于导航ID的ID选择器，对，所以它是ID的一个。我们还有两个向右拉和向右拉的类，因此对于类类别来说是两个，最后，这里还有两个元素选择器。nav元素和div元素，这意味着元素类别也是两个。因此，最终选择器的特异性为零，一，二，二，这实际上是一个高度特定的选择器。

选择器三很简单。它只是一个元素选择器，因此特异性为零，零，零，一。

现在是最后一个，选择器编号为4。首先，我们有导航ID，所以它是ID的ID。接下来，我们有一个类，按钮类和一个伪类，将其悬停，这使得类类别总共成为两个。由于还有一个元素选择器，因此最终的特异性为零，一，二，一。

现在，让我们知道如何实际使用这些数字来找出哪个选择器适用。我们从最具体的类别（内联样式）开始，从左到右查看数字。如果有一个选择器用于内联样式，则将与所有其他选择器一起获胜，因为这是最具体的类别。好吧，这里不是这种情况，所以让我们继续进行ID。我们看到选择器2和4在这里有一个，而其他选择器有0，所以具有0的选择器不在游戏之列，因为它们的选择性不如选择​​器2和4的ID。

现在，由于两个选择器在ID类别中都有一个，因此我们必须继续检查类。他们在这个类别中都有两个，但两者之间仍然是一个纽带。最后，在元素类别中，选择器2具有一个2，而选择器4仅具有一个，因此我们在这里有一个赢家。第二个选择器是所有选择器中最具体的选择器，因此它将为我们的按钮提供绿色背景。34获胜声明的值称为级联值，因为它是级联的结果。

因此，我们从一堆声明的值开始，在这种情况下为蓝色，绿色，紫色和黄色，其中一个获胜并成为级联值，在我们的示例中为绿色。

现在想象一下，扇区4也有两个元素，那么选择器2和4都具有完全相同的特异性，对。所以在这种情况下会发生什么，我向您保证，现在差不多了。好吧，如果此时仍然有关系，那么代码中最后编写的CSS声明就是适用的声明。同样，如果所有条件都相等，则如果所有声明选择器都具有相同的特异性，那么它仅仅是用于定义所选元素样式的最后一个声明。

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

这主要是根据CSS中提到的优先级完成的冲突解决过程。

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

级联意味着逐步倒入或逐步增加。样式表包含用于样式化html元素的代码。而将代码写入样式表的方式是级联的。或者，简单地，将样式表中html页面的每个html元素的层对背代码作为层叠样式表。

级联是一种为每个样式规则分配权重的算法。当应用多个规则时，权重最大的规则优先。

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

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

1. 标有！important的CSS声明具有最高优先级。

2. 但是只能将！important用作最后一个资源。最好使用正确的规范-更易于维护的代码！

3. 内联样式始终优先于外部样式表中的样式。

4. 包含1个ID的选择器比包含1000个类的选择器更具体。

5. 包含1个类的选择器比包含1000个元素的选择器更具体。

6. 通用选择器*没有专一性值（0,0,0）

7. 依赖于特异性而不是选择器的顺序。

8. 但是在使用3rd party样式表时要依赖顺序-始终将您的作者样式表放在最后。

在选择要应用于HTML元素的CSS样式时，根据解决样式之间冲突的级联规则集，特异性会覆盖一般性：

1. 如果没有CSS，则会根据浏览器的默认样式显示HTML。
2. CSS标记选择器（与HTML标记匹配）将覆盖浏览器的默认设置。
3. CSS类选择器（带有。）会覆盖标记引用。
4. CSS ID选择器（带有＃）会覆盖类引用。
5. 编码为HTML标签的内联CSS会覆盖ID，类和标签CSS。
6. 在CSS样式中添加！important值会覆盖所有其他内容。
7. 如果CSS选择器相同，则浏览器将合并其属性。如果产生的CSS属性发生冲突，则浏览器将选择稍后或最近在代码中出现的属性值。

与标签，类和/或ID的更具体组合相匹配的CSS选择器将具有优先权。在以下示例中，第一个示例将优先于第二个示例，无论它们在CSS中的出现顺序如何：

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

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

<p>My Headline<p>

会以14pt字体呈现p，因为它与实际元素“更接近”（从文件顶部到文件底部加载的外部样式表）。如果使用链接的样式表，然后在链接到外部CSS文档之后在文档的头部包含一些CSS ，则“ in head”声明将获胜，因为它离定义的元素更近。这仅适用于权重相等的选择器。请访问http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html，以获取有关给定选择器权重的良好描述。

综上所述，出于所有实际目的，您也可以将“继承”视为级联的一部分。事物从包含元素开始“级联”。