问题
Let's say I have following CSS :
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
and my markup is :
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
My question is Does the CSS above translate to :
body {
color: blue;
}
div {
color: green;
}
#alert{
color: red;
}
or is there an additional
* {
color: red;
}
Without variables the universal selector applies the same CSS on all elements. Does this change and the styling becomes dependent on elements?
One more question I have is if :root
translates to body
in CSS.
Here is a CodePen demo : http://codepen.io/anon/pen/RrvLJQ
回答1:
As you've correctly stated in your title, custom properties cascade. In fact, this is why the module is called CSS Custom Properties for Cascading Variables. That means your custom property --color
is evaluated as-is per element, just as with any other CSS property. In terms of the actual styles that are applied to your elements, what you really only have is:
* {
color: var(--color);
}
The var(--color)
value is then evaluated for each element based on how the --color
property cascades. So it follows that:
- The
body
element has a blue foreground. - Any
div
elements have a green foreground. - The element whose ID is "alert" has a red foreground.
- Because you don't have a
--color
definition for*
, it's inherited by default. Therefore all other elements inherit--color
from their parent element:body > p
inherits frombody
, becoming blue, and#alert > p
inherits from#alert
, becoming red.
If you really do want to express the cascaded values in terms of CSS, you could say that it translates to the following:
:root {
color: blue;
}
div {
color: green;
}
#alert {
color: red;
}
* {
color: inherit;
}
But only because the original CSS contains an explicit * { color: var(--color); }
definition which ensures that every element's color
maps to --color
.
Note also that the code that you have comes from an example within the spec, which itself is described as follows:
If a custom property is declared multiple times, the standard cascade rules help resolve it. Variables always draw from the computed value of the associated custom property on the same element
One more question I have is if
:root
translates tobody
in CSS.
:root
doesn't translate to any element in CSS, because CSS is document language-agnostic.:root
doesn't translate tobody
in HTML; it corresponds tohtml
.
回答2:
Let's start with this:
One more question I have is if
:root
translates tobody
in CSS.
Answer:
The
:root
selector allows you to target the highest-level "parent" element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content. In the overwhelming majority of cases you're likely to encounter,:root
refers to the<html>
element in a webpage.
Source
Then this css vars:
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
will translate (depending on your DOM - as mentioned above), in something like this:
html /* this is :root*/ {
color: blue;
}
div {
color: green;
}
#alert {
color: red;
}
* {
color: inherit; /*this will inherit blue due to HTML is set to blue */
}
<h1>blue</h1>
<div>green</div>
<span id="alert">red</span>
<span>blue</span>
来源:https://stackoverflow.com/questions/35375560/how-do-css-custom-properties-cascade