What's the exact meaning of the term "Cascading" in CSS? I am getting different views, so I ask here. An example would help.
"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.
The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen.
When I teach CSS, I always tell the students that "cascading style sheets" means something like "fighting style sheets".
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!
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.
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/
The following article answers your question perfectly.
It's the order in which properties are applied on a particular element(s).
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.
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.)
- 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:
- initialize the value array;
- apply the values from 1st origin;
- apply the values from 2st origin, override if the value exists;
- ...
- apply the values from Nth origin, override if the values exists;
From the pseudo-code you can see it quite looks like a waterfall of several cascades.
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.
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 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.
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.
Cascading is an algorithm which assigns weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
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.
All that said, you could consider 'inheritance' as part of the cascade as well - for all practical purposes. Things "cascade" down from containing elements.
来源：https://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css