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

What is the meaning of "cascading' in CSS?

提问by Wondering

What's the exact meaning of the term "Cascading" in CSS? I am getting different views, so I ask here. An example would help.

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

回答by seanyboy

"Cascading" in this context means that because more than one stylesheet declaration could apply to a particular piece of HTML, there has to be a known way of determining which specific stylesheet rule applies to which piece of HTML.

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

The rule used is chosen by cascading down from the more general declarations to the specific rule required. The most specific declaration is chosen.

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

回答by AmbroseChapel

When I teach CSS, I always tell the students that "cascading style sheets" means something like "fightingstyle sheets".

我在教 CSS 的时候，总是跟学生说“层叠样式表”的意思是“格斗样式表”。

One rule tells your H3 tag to be red, another rule tells it to be green -- the rules are contradicting each other, who will win!? Stylesheet deathmatch!

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

OK maybe that's a slight exaggeration, but it's far more amenable to non-code, non-programming people who are just starting out than any notion of a cascade, or inheritance.

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

I do of course make sure to tell them that it's not a problem for the style sheets to be fighting each other, that's the way the language was designed.

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

回答by Mads Mob?k

H?kon Wium Lie (CSS co-creator) defines "cascade" in his PHD-thesis on CSS as "The process of combining several style sheets and resolving conflicts between them" https://www.wiumlie.no/2006/phd/

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

回答by abhisekp

The following article answers your question perfectly.

下面的文章完美地回答了你的问题。

It's the order in which properties are applied on a particular element(s).

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

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

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

回答by daveross858

You have to think of it from the outside in. If you have a rule that that is on the body tag it will "cascade" through every child tag. If you put a rule on any tag inside the body it will adopt that rule, and so on. So the rule cascades through all the content unless interrupted by a rule from an embedded tag.

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

回答by wang zhihao

You can treat the CSS processing as a waterfall contains several cascades. Here are those cascades from top to bottom in order: (The lower can override the same property in the higher.)

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

1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations

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

See more in the spec

在规范中查看更多信息

The cascadingis to pick the right value from multiple origins. But it's different from sorting. Only something not in order need we to sort. But in CSS these origins have fixed precedence. And thus the pseudo-code might look like the follows:

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

1. initialize the value array;
2. apply the values from 1st origin;
3. apply the values from 2st origin, override if the value exists;
4. ...
5. apply the values from Nth origin, override if the values exists;

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

From the pseudo-code you can see it quite looks like a waterfall of several cascades.

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

回答by nevster

One clarification that may help. If you include two stylesheets and there's a rule with the same specificity in each, the one included last wins. I.E. the last in the cascade has the most influence.

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

(This is just a variation on having the two rules in the same sheet - the last one wins if all other things are equal.)

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

Eg, given

例如，给定

body {
    background:blue;
}

body {
    background:green;
}

then the background will be green.

那么背景将是绿色的。

回答by antonjs

Cascading is an algorithm which assigns weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.

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

回答by dinesh kumar

When one or more styles are applied to the same element.CSS performs a set of rules called cascading which evaluates the strength of Specificity of the two applied styles and determines the winner i.e the style rule which has more weight wins.if the two rules have same weight then the rule applied last wins.

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

回答by behzad

CSS stands for Cascading Style Sheet. By their very nature styles further down a cascading stylesheet override equivalent styles higher up (unless styles higher up are more specific). We can therefore set base styles at the beginning of a stylesheet, applicable to all versions of our design, and then override relevant sections with media queries further on in the document.

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