How do CSS custom properties cascade?

问题

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 from body, 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 to body in CSS.

:root doesn't translate to any element in CSS, because CSS is document language-agnostic.
:root doesn't translate to body in HTML; it corresponds to html.

回答2:

Let's start with this:

One more question I have is if :root translates to body 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

标签

html

css

css3

css-variables