css - CSS中的“级联”是什么意思？

Question

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

score 128 · Accepted Answer

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

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

score 59 · Accepted Answer

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

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

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

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

score 26 · Accepted Answer

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

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

例如，给定

body {
    background:blue;
}

body {
    background:green;
}

那么背景将是绿色的。

score 2 · Accepted Answer

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

用户代理声明
用户正常声明
作者正常声明
编写重要声明
用户重要声明

在规范中查看更多信息

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

初始化值数组；
应用来自第一个来源的值；
应用来自第二个来源的值，如果值存在则覆盖；
...
应用来自第 N 个原点的值，如果值存在则覆盖；

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

score 2 · Accepted Answer

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

什么是级联？

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

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

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

回到 CSS 世界。

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

'STEP' 1. Web 浏览器规则
'STEP' 2. 外部规则（链接到外部 CSS 文件）
'STEP' 3. CSS 文件中的样式
'STEP' 4. 内联属性'style'

“级联”算法选择最低的“步”作为最重要的。因为这些都在“瀑布”的“最低”处。下面的任何规则都会覆盖上面的规则。

假设你有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>

你只会改变颜色。之前“步骤”中的所有其他规则都被“保留”。这就是它的美。

score 1 · Accepted Answer

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

如果没有 CSS，HTML 将按照浏览器的默认样式显示。
CSS标记选择器（匹配 HTML 标记）覆盖浏览器默认值。
CSS类选择器（带 .）覆盖标签引用。
CSS ID选择器（带#）覆盖类引用。
编码到 HTML 标记中的内联CSS 覆盖 ID、类和标记 CSS。
将!important值添加到 CSS 样式会覆盖其他所有内容。
如果 CSS 选择器相同，则浏览器会组合它们的属性。如果生成的 CSS 属性发生冲突，浏览器会选择代码中较晚或最近出现的属性值。

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

标有 !important 的 CSS 声明具有最高优先级。
但仅使用 !important 作为最后一个资源。最好使用正确的特性——更易于维护的代码！
内联样式总是优先于外部样式表中的样式。
包含 1 个 ID 的选择器比包含 1000 个类的选择器更具体。
包含 1 个类的选择器比包含 1000 个元素的选择器更具体。
通用选择器 * 没有特异性值（0,0,0）
更多地依赖特异性而不是选择器的顺序。
但是在使用 3rd 方样式表时要依赖顺序 - 始终将您的作者样式表放在最后。

score -1 · Accepted Answer

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

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

score -1 · Accepted Answer

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

score -1 · Accepted Answer

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

score -1 · Accepted Answer

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

score -3 · Accepted Answer

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以获得对给定选择器权重的良好描述。

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

css - CSS中的“级联”是什么意思？

15 回答 15

Related

Reference