CSS中“cascading”的含义是什么？

Question

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

Answer 1

“层叠”在此上下文中意味着因为多个样式表规则可以应用于特定的HTML，所以必须有一种已知的方法来确定哪个特定的样式表规则适用于哪个HTML。

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

Answer 2

当我教CSS时，我总是告诉学生“级联样式表”意味着“战斗样式表”。

一条规则告诉你的H3标签是红色的，另一条规则告诉它是绿色的 - 规则相互矛盾，谁会胜利！？样式表死亡竞赛！

好吧也许这有点夸大其词，但对于非代码，非编程人员来说，它比起任何级联或继承的概念更为适合。

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

Answer 3

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

Answer 4

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

这是在特定元素上应用属性的顺序。

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

Answer 5

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

Answer 6

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

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

在spec

中查看更多内容

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

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

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

Answer 7

可能有所帮助的一个澄清。如果您包含两个样式表，并且每个样式表中具有相同特异性的规则，则包括最后一个获胜的规则。 I.E.级联中的最后一个影响最大。

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

例如，给定

body {
    background:blue;
}

body {
    background:green;
}

然后背景将变为绿色。

Answer 8

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

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

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

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

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

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

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

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

内联样式具有最高的特异性，其次是ID，然后是类， 伪类和属性选择器，最后是最不具体的元素和伪元素选择器。所以当我们有矛盾的声明时 就像在上一张幻灯片中看到的一样重要，我们根据我刚刚向您展示的优先级来计算选择器的特异性，但让我们看看如何通过一个小例子实际计算特异性，这总是最好的。

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

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

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

第三个选择器非常简单。这只是一个元素选择器 因此特异性为零，零，零，一。

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

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

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

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

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

Answer 9

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

Answer 10

样式表中的每个规则都参与了类似于级联的“战争”。级联是一个很少使用的词，这就是理解 CSS 中的“C”有问题的原因。

什么是级联？

Cascade 词的意思是瀑布。不是任何瀑布。它是由岩石组成的台阶。

现在想象每一个步骤都代表一个不同的规则，可以将样式应用到您的 HTML。

当水从一块岩石“向下”落到另一块岩石时，就不可能随着水“向上”返回。水落了，就是这样。

回到 CSS 世界。

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

• 'STEP' 1. 网络浏览器规则
• '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>

根据“级联”，最低的步骤是第 3 步。

这就是为什么你的段落是“蓝色”而不是“红色”。

在这种情况下，为什么要使用“cascade”这个词来代表带有岩石的瀑布？因为当水落下时，它会将所有东西都带到底部。

为什么重要？

因为如果你也将 sample.html 放在外部 CSS 文件中：

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

您不会使用以下方法删除 font-weight: bold;：

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

您只需更改颜色即可。之前“步骤”中的所有其他规则都被“保留”。这就是其中的美。

Answer 11

在选择要应用于HTML元素的CSS样式时，特殊性会根据解决样式之间冲突的 cascading 规则集来覆盖通用性：

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

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

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

Answer 12

层叠和特异性您需要了解的信息：

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

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

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

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

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

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

7. 比选择符的顺序更依赖于特异性。

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

根据CSS中提到的优先顺序，这是冲突解决过程的主要原因。

Answer 17

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

<p>My Headline<p>

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

所有这一切，你可以将'继承'视为级联的一部分 - 出于所有实际目的。事物从包含元素“级联”下来。