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中“级联”一词的确切含义是什么?我有不同的看法，所以我在这里问。一个例子会有所帮助。
12 个解决方案
#1
97
"Cascading" in this context means that because more than one stylesheet rule 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 rules to the specific rule required. The most specific rule is chosen.
使用的规则通过从更一般的规则级联到所需的特定规则来选择。选择最具体的规则。
#2
38
When I teach CSS, I always tell the students that "cascading style sheets" means something like "fighting style 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.
当然，我一定要告诉他们，样式表之间发生冲突不是问题，这是语言设计的方式。
#3
10
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" (http://people.opera.com/howcome/2006/phd/#h-357)
Hakon Wium Lie (CSS共同创建者)在他的phd论文中定义了“cascade”，即“将多个样式表组合起来并解决它们之间的冲突的过程”(http://people.opera.com/howcome/2006/phd/#h-357)。
#4
5
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
#5
4
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标记上有一个规则，它将“级联”遍历每个子标记。如果您在主体内的任何标记上放置一条规则，它将采用该规则，等等。因此，规则级联到所有内容中，除非被嵌入标签中的规则所打断。
#6
1
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处理视为一个瀑布包含几个级联。下面是这些从上到下的级联，按顺序排列:(较低的可以覆盖较高的相同属性。)
- user agent declarations
- 用户代理声明
- user normal declarations
- 用户正常的声明
- author normal declarations
- 正常的作者声明
- author important declarations
- 作者重要声明
- user important declarations
- 用户重要声明
See more in the spec
在规范中看到更多
The cascading is 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中，这些起源有固定的优先级。因此伪代码可能如下所示:
- initialize the value array;
- 初始化值数组;
- apply the values from 1st origin;
- 应用第一个原点的值;
- apply the values from 2st origin, override if the value exists;
- 从2st开始应用值，如果值存在则重写;
- ...
- …
- apply the values from Nth origin, override if the values exists;
- 应用第n个原点的值，如果值存在则重写;
From the pseudo-code you can see it quite looks like a waterfall of several cascades.
从伪代码中可以看到，它看起来很像几个瀑布级联。
#7
1
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.
一个可能有帮助的澄清。如果您包含两个样式表，并且每个样式表都有一个具有相同特性的规则，则包含最后一个样式表的规则将获胜。即级联中的最后一个影响最大。
(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.
然后背景变成绿色。
#8
0
It is a process which is used to resolve the conflicts in style sheet specification.
它是一个用于解决样式表规范中的冲突的过程。
That is primely the conflict resolution process done according to the precedence mention in CSS.
这是在CSS中优先提到的冲突解决过程。
#9
0
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代表级联样式表。由于层叠样式表的本质样式，它会覆盖更高层次的等效样式(除非更高层次的样式更具体)。因此，我们可以在样式表的开头设置基本样式，适用于我们设计的所有版本，然后在文档中进一步使用媒体查询覆盖相关部分。
#10
0
Cascading means pouring down in steps or adding in steps. Style sheets contains codes for styling a html element. And the manner in which the codes are written in style sheet is in the cascading fashion. Or simply, back to back codes in layers for each html element of a html page in style sheet make the cascading style sheet.
级联意味着按步骤倒下来或按步骤添加。样式表包含样式化html元素的代码。代码在样式表中编写的方式是层叠式的。或者简单地说，样式表中html页面的每个html元素的层叠样式表就是层叠样式表。
#11
0
Cascading is an algorithm which assigns weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
级联是一种分配权重到每个样式规则的算法。当应用一些规则时，权重最大的规则优先。
#12
-2
CSS doc
p{font-size: 12pt;}
p{font-size: 14pt;}
<p>My Headline<p>
would render the p at 14pt font because it's "closer" to the actual element (external style sheets loading from top of file to bottom of file). If you use a linked style sheet and then include some CSS in the head of your document after linking to the external CSS doc, the "in head" declaration would win because it's even closer to the element defined. This is only true of equally weighted selectors. Check out http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html for a good description of the weight of a given selector.
将p呈现为14pt字体，因为它“更接近”实际的元素(从文件顶部加载到文件底部的外部样式表)。如果您使用一个链接样式表，并在链接到外部CSS doc后在文档头部包含一些CSS，那么“in head”声明将胜出，因为它甚至更接近所定义的元素。这只适用于同等权重的选择器。请查看http://www.stuffandnonsense.co.uk/archives/css_ity_wars.html，以了解给定选择器的权重。
All that said, you could consider 'inheritance' as part of the cascade as well - for all practical purposes. Things "cascade" down from containing elements.
尽管如此，您也可以考虑将“继承”作为级联的一部分——用于所有实际目的。事物从包含元素“级联”下来。
#1
97
"Cascading" in this context means that because more than one stylesheet rule 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 rules to the specific rule required. The most specific rule is chosen.
使用的规则通过从更一般的规则级联到所需的特定规则来选择。选择最具体的规则。
#2
38
When I teach CSS, I always tell the students that "cascading style sheets" means something like "fighting style 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.
当然，我一定要告诉他们，样式表之间发生冲突不是问题，这是语言设计的方式。
#3
10
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" (http://people.opera.com/howcome/2006/phd/#h-357)
Hakon Wium Lie (CSS共同创建者)在他的phd论文中定义了“cascade”，即“将多个样式表组合起来并解决它们之间的冲突的过程”(http://people.opera.com/howcome/2006/phd/#h-357)。
#4
5
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
#5
4
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标记上有一个规则，它将“级联”遍历每个子标记。如果您在主体内的任何标记上放置一条规则，它将采用该规则，等等。因此，规则级联到所有内容中，除非被嵌入标签中的规则所打断。
#6
1
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处理视为一个瀑布包含几个级联。下面是这些从上到下的级联，按顺序排列:(较低的可以覆盖较高的相同属性。)
- user agent declarations
- 用户代理声明
- user normal declarations
- 用户正常的声明
- author normal declarations
- 正常的作者声明
- author important declarations
- 作者重要声明
- user important declarations
- 用户重要声明
See more in the spec
在规范中看到更多
The cascading is 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中，这些起源有固定的优先级。因此伪代码可能如下所示:
- initialize the value array;
- 初始化值数组;
- apply the values from 1st origin;
- 应用第一个原点的值;
- apply the values from 2st origin, override if the value exists;
- 从2st开始应用值，如果值存在则重写;
- ...
- …
- apply the values from Nth origin, override if the values exists;
- 应用第n个原点的值，如果值存在则重写;
From the pseudo-code you can see it quite looks like a waterfall of several cascades.
从伪代码中可以看到，它看起来很像几个瀑布级联。
#7
1
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.
一个可能有帮助的澄清。如果您包含两个样式表，并且每个样式表都有一个具有相同特性的规则，则包含最后一个样式表的规则将获胜。即级联中的最后一个影响最大。
(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.
然后背景变成绿色。
#8
0
It is a process which is used to resolve the conflicts in style sheet specification.
它是一个用于解决样式表规范中的冲突的过程。
That is primely the conflict resolution process done according to the precedence mention in CSS.
这是在CSS中优先提到的冲突解决过程。
#9
0
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代表级联样式表。由于层叠样式表的本质样式，它会覆盖更高层次的等效样式(除非更高层次的样式更具体)。因此，我们可以在样式表的开头设置基本样式，适用于我们设计的所有版本，然后在文档中进一步使用媒体查询覆盖相关部分。
#10
0
Cascading means pouring down in steps or adding in steps. Style sheets contains codes for styling a html element. And the manner in which the codes are written in style sheet is in the cascading fashion. Or simply, back to back codes in layers for each html element of a html page in style sheet make the cascading style sheet.
级联意味着按步骤倒下来或按步骤添加。样式表包含样式化html元素的代码。代码在样式表中编写的方式是层叠式的。或者简单地说，样式表中html页面的每个html元素的层叠样式表就是层叠样式表。
#11
0
Cascading is an algorithm which assigns weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
级联是一种分配权重到每个样式规则的算法。当应用一些规则时，权重最大的规则优先。
#12
-2
CSS doc
p{font-size: 12pt;}
p{font-size: 14pt;}
<p>My Headline<p>
would render the p at 14pt font because it's "closer" to the actual element (external style sheets loading from top of file to bottom of file). If you use a linked style sheet and then include some CSS in the head of your document after linking to the external CSS doc, the "in head" declaration would win because it's even closer to the element defined. This is only true of equally weighted selectors. Check out http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html for a good description of the weight of a given selector.
将p呈现为14pt字体，因为它“更接近”实际的元素(从文件顶部加载到文件底部的外部样式表)。如果您使用一个链接样式表，并在链接到外部CSS doc后在文档头部包含一些CSS，那么“in head”声明将胜出，因为它甚至更接近所定义的元素。这只适用于同等权重的选择器。请查看http://www.stuffandnonsense.co.uk/archives/css_ity_wars.html，以了解给定选择器的权重。
All that said, you could consider 'inheritance' as part of the cascade as well - for all practical purposes. Things "cascade" down from containing elements.
尽管如此，您也可以考虑将“继承”作为级联的一部分——用于所有实际目的。事物从包含元素“级联”下来。