【发布时间】：2010-11-05 19:01:53
【问题描述】：
CSS 中“级联”一词的确切含义是什么？我得到了不同的看法，所以我在这里问。举个例子会有所帮助。
【问题讨论】：
-
如果你和我一样，“级联”是指你将花费在以两个像素增量调整 div 宽度以使事情看起来“恰到好处”的级联时间量，而不是专注于您的基本业务逻辑。 （我可能会得到一些否定的答案，但这是真的）
标签： css terminology css-cascade
【发布时间】：2010-11-05 19:01:53
【问题描述】：
在此上下文中的“级联”意味着因为多个样式表声明可以应用于特定的 HTML 片段，所以必须有一种已知的方法来确定哪个特定的样式表规则适用于哪个 HTML 片段。
使用的规则是通过从更一般的声明级联到所需的特定规则来选择的。选择最具体的声明。
【讨论】：
-
class/ID 和 order 什么时候起作用？
-
@AllDani ID 比类更具体。所以我想你可以说类规则级联到更具体的 id 规则。如果 2 个规则具有相同的优先级（例如 2 个类在一个元素上具有冲突的规则），则 css 文件中指定的最后一个优先。
-
所以如果 ID 说“A”而 class 说“B”，那么即使 class 在工作表的后面，ID (A) 也会赢？ IE。仅当两种样式具有完全相同的特异性时，顺序才会起作用？
-
@DaniSpringer 是的，没错。 id 选择器甚至是 CSS 中最具体的选择器之一。为了演示，它甚至会“赢”诸如“div.blubb:hover”之类的选择器。只有内联样式和 !important 规则更具体。
当我教 CSS 时，我总是告诉学生“层叠样式表”的意思是“fighting 样式表”。
一条规则告诉你的H3标签是红色的，另一条规则告诉它是绿色的——规则相互矛盾，谁会赢！？样式表死斗！
好吧，也许这有点夸张，但它比任何级联或继承的概念都更适合刚起步的非代码、非编程人员。
我当然一定要告诉他们，样式表相互冲突不是问题，这就是语言的设计方式。
【讨论】：
-
您似乎对这个问题感到困惑。这不是“什么是特异性/继承性”，也不是关于应用哪些规则等。而是“级联意味着什么？”。
-
我知道这是一篇旧文章，但仍然：我认为样式表和/或 CSS 规则“战斗”的例子是一个糟糕的例子。对新学习者（在我自己的教学经验中）更有指导意义的是解释覆盖以前规则的规则的层次结构。例如，一名员工将 H3 标签涂成红色（第一条规则），然后将其交给 QA 经理，后者否决了他并决定将其涂成绿色（第二条规则）。没有死亡竞赛，只有公司等级制度。 CSS 规则不会“反抗”，它们会通过严格定义的层次系统运行（级联），该系统由后续决策推翻先前的决策。
-
我完全否决了这一点，因为你没有解释他们为什么“打架”以及谁会赢得这场战斗，更重要的是为什么那个人会赢。这些是回答这个问题的基本部分。
-
需要明确的是，样式的权重决定了应用哪个样式，这称为特异性。术语“级联”不仅仅与特异性有关，还包括源顺序。当权重相同时，源顺序开始发挥作用（用户代理样式表->作者样式表->用户样式表），其工作方式类似于级联。 developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…
Håkon Wium Lie（CSS 共同创造者）在他关于 CSS 的博士论文中将“级联”定义为 “合并多个样式表并解决它们之间的冲突的过程”https://www.wiumlie.no/2006/phd/
【讨论】：
【讨论】：
你必须从外向内考虑它。如果你有一个规则，那就是在 body 标签上，它将“级联”通过每个子标签。如果您在正文中的任何标记上放置规则，它将采用该规则，依此类推。因此，除非被嵌入标签中的规则打断，否则规则会级联所有内容。
【讨论】：
-
这并不意味着什么优先。模棱两可？
您可以将 CSS 处理视为包含多个级联的瀑布。以下是按顺序从上到下的级联：（较低的可以覆盖较高的相同属性。）
- 用户代理声明
- 用户正常声明
- 编写正常声明
- 编写重要声明
- 用户重要声明
在spec中查看更多信息
级联是从多个来源中选择正确的值。但它不同于排序。只有不按顺序排列的东西才需要我们排序。但在 CSS 中，这些来源具有固定的优先级。因此伪代码可能如下所示：
- 初始化值数组；
- 应用来自第一个来源的值；
- 应用来自第二个来源的值，如果值存在则覆盖；
- ...
- 应用来自第 N 个原点的值，如果值存在则覆盖；
从伪代码中你可以看到它看起来很像几个级联的瀑布。
【讨论】：
一个可能会有所帮助的澄清。如果您包含两个样式表，并且每个样式表中都有一个具有相同特性的规则，那么最后包含的一个将获胜。 IE。级联中的最后一个影响最大。
（这只是将两条规则放在同一张纸上的一种变体——如果所有其他条件都相同，最后一条获胜。）
例如，给定
body {
background:blue;
}
body {
background:green;
}
那么背景将是绿色的。
【讨论】：
在选择应用于 HTML 元素的 CSS 样式时，根据解决样式之间冲突的 级联 规则集，特异性覆盖一般性：
- 如果没有 CSS，HTML 将按照浏览器的默认样式显示。
- CSS tag 选择器（匹配 HTML 标签）覆盖浏览器默认值。
- CSS class 选择器（带 .）覆盖标签引用。
- CSS ID 选择器（带#）覆盖类引用。
- 内联 CSS 编码到 HTML 标记中覆盖 ID、类和标记 CSS。
- 将 !important 值添加到 CSS 样式会覆盖所有内容 否则。
- 如果 CSS 选择器相同，浏览器会组合它们的属性。如果生成的 CSS 属性发生冲突，浏览器会选择代码中稍后或最近出现的属性值。
匹配标签、类和/或 ID 的更具体组合的 CSS 选择器将具有优先权。在以下示例中，第一个将优先于第二个，无论它们在 CSS 中的出现顺序如何：
ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }
【讨论】：
样式表中的每个规则都参与了类似于级联的“战争”。 Cascade 是一个很少使用的词，这就是理解 CSS 中的“C”的原因。
什么是级联？
Cascade 字的意思是瀑布。不是任何瀑布。它是由岩石组成的台阶。
现在想象每个步骤都代表一个不同的规则，可以将样式应用到您的 HTML。
当水从一块岩石“向下”落到另一块岩石上时，就不可能随着水“向上”返回。水落了，就是这样。
回到 CSS 世界。
简化的（还有更多）顺序是：
- 'STEP' 1. Web 浏览器规则
- 'STEP' 2. 外部规则（链接到 外部 CSS 文件）
- 'STEP' 3. CSS 文件中的样式
- 'STEP' 4. 内联属性'style'
'Cascade'算法选择最低的'step'作为最重要的。因为这些都在“瀑布”的“最低”处。下面的任何规则都会覆盖上面的规则。
假设您有sample.html 文件。
在sample.html 中，您有一个指向外部 CSS 文件的链接（第 2 步），您可以在其中放置选择器和如下规则：
p
{
color: red;
}
同时在sample.html的head标签中，你输入：
<style>
p
{
color: blue;
}
</style>
根据“级联”，最低步是第 3 步。
这就是为什么你的段落是“蓝色”而不是“红色”。
为什么要在这种情况下使用“瀑布”一词来表示带有岩石的瀑布？因为当水落下时，它会把一切都带入水底。
为什么重要？
因为如果你把 sample.html 也放在外部 CSS 文件中：
p
{
color: red;
font-weight: bold;
}
您不会使用以下方法删除 font-weight: bold;：
<style>
p
{
color: blue;
}
</style>
你只会改变颜色。之前“步骤”中的所有其他规则都被“保留”。这就是它的美妙之处。
【讨论】：
CSS 代表层叠样式表。就其本质而言，级联样式表会覆盖更高的等效样式（除非更高的样式更具体）。因此，我们可以在样式表的开头设置基本样式，适用于我们设计的所有版本，然后在文档中进一步使用媒体查询覆盖相关部分。
【讨论】：
您需要了解的级联和特异性：
-
标有 !important 的 CSS 声明具有最高优先级。
-
但仅使用 !important 作为最后一个资源。最好使用正确的特性 - 更易于维护的代码！
-
内联样式总是优先于外部样式表中的样式。
-
包含 1 个 ID 的选择器比包含 1000 个类的选择器更具体。
-
包含 1 个类的选择器比包含 1000 个元素的选择器更具体。
-
通用选择器 * 没有特异性值（0,0,0）
-
更多地依赖特异性而不是选择器的顺序。
-
但是在使用 3rd 方样式表时要依赖顺序 - 始终将您的作者样式表放在最后。
【讨论】：
这是一个用于解决样式表规范冲突的过程。
这主要是根据 CSS 中的优先级完成的冲突解决过程。
【讨论】：
层叠意味着逐步倾倒或逐步增加。样式表包含用于设置 html 元素样式的代码。代码在样式表中的编写方式是级联的。或者简单地说，样式表中 html 页面的每个 html 元素的层中背靠背代码构成了层叠样式表。
【讨论】：
级联是一种为每个样式规则分配权重的算法。 当多个规则适用时，权重最大的规则优先。
【讨论】：
当一个或多个样式应用于同一个元素时。CSS 执行一组称为级联的规则，它评估两个应用样式的特异性强度并确定获胜者，即具有更多权重的样式规则获胜。如果两条规则的权重相同，则最后应用的规则获胜。
【讨论】：
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 以获得对给定选择器权重的详细描述。
话虽如此，您也可以将“继承”视为级联的一部分 - 出于所有实际目的。事物从包含元素“级联”下来。
【讨论】：
-
这意味着放在两者之间的样式很重要，即使没有指向给定的元素。这是不正确的，如果我跟随。
-
似乎已编辑。无论如何，我不明白这是如何回答这个问题的。