CSS中"cascading"的含义是什么？

Question

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

Answer 1

在此上下文中的"级联"意味着因为多个样式表规则可以应用于特定的HTML片段,所以必须有一种已知的方法来确定哪个特定样式表规则适用于哪个HTML片段.

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

@AllDani ID 比类更具体。所以我猜你可以说类规则级联到更具体的 id 规则上。如果 2 个规则具有相同的优先级（例如 2 个在一个元素上具有冲突规则的类），则 css 文件中指定的最后一个优先。 (2认同)
@DaniSpringer 是的，没错。id 选择器甚至是 CSS 中最具体的选择器之一。为了演示，它甚至会“赢”像“div.blubb:hover”这样的选择器。只有内联样式和 !important 规则具有更多的特异性。 (2认同)

Answer 2

当我教CSS时,我总是告诉学生"层叠样式表"意味着" 战斗样式表".

一条规则告诉你的H3标签是红色的,另一条规则告诉它是绿色的 - 规则是相互矛盾的,谁会赢!样式表死亡竞赛!

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

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

可能是因为它没有解释哪个会赢,以及为什么. (17认同)
你似乎对这个问题感到困惑.它不是"什么是特异性/继承",或者是关于应用哪些规则等等.它是"级联意味着什么？". (13认同)
我完全否决了这一点，因为你没有解释为什么他们“战斗”以及谁会赢得这场战斗，更重要的是为什么那个人会获胜。这些是回答这个问题的基本部分。 (7认同)
不知道为什么这会被低估.看起来像是对新学员的简单解释. (5认同)
我知道这是一个旧帖子,但仍然是:我认为样式表和/或CSS规则"战斗"的例子很糟糕.新学习者(在我自己的教学经验中)更有启发性的是解释覆盖前一个规则的规则的层次结构.比如,一名员工将H3标签涂成红色(第一条规则),然后将其交给他的QA经理,后者推翻他并决定将其涂成绿色(第二条规则).没有死亡匹配,只是企业层级.CSS规则不会"打击它",它们通过严格定义的后续决策层级系统(级联)来运行(级联). (5认同)

Answer 3

HåkonWiumLie(CSS共同创建者)在他的关于CSS的博士论文中将"级联"定义为"将几个样式表结合起来并解决它们之间的冲突的过程" https://www.wiumlie.no/2006/phd/

Answer 4

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

什么是级联？

Cascade一词的意思是瀑布。没有任何瀑布。这是一个有由岩石组成的 台阶的台阶。

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

当水从一块岩石“向下”落到另一块岩石时，就不可能以“向上”的方式返回。水已经落下来了，就是这样。

回到 CSS 世界。

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

“级联”算法选择最低的“步骤”作为最重要的。因为这些都是在“瀑布”的“最低”处。下面的规则优先于上面的规则。

假设您有sample.html文件。

里面sample.html有一个指向外部 CSS 文件的链接（第 2 步），您可以在其中放置选择器和如下规则：

p
{
  color: red;
}

同时在的 head 标签中sample.html输入：

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

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

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

为什么要在这种情况下使用“级联”一词来代表带有岩石的瀑布呢？因为当水落下时，它会把一切都带入底部。

为什么这有关系？

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

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

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

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

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

Answer 5

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

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

Answer 6

您必须从外到内考虑它。如果您有一个规则，该规则位于 body 标记上，它将“级联”通过每个子标记。如果您在正文内的任何标签上放置规则，它将采用该规则，依此类推。因此，规则会级联所有内容，除非被嵌入标记的规则中断。