How Do `html`, `body`, and the Universal Selector (*) Differ in CSS Selector Precedence?

CSS Selector Precedence: html, body, and the Universal Selector* (Updated)

The question arises: how do three rules differ when applied to the same HTML document? Let's explore the distinctive effects of these selectors: html, body, and the universal selector *.

html Selector:

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}

This rule applies color and background styles to the element. Its descendants inherit the color but not the background, including the element. The element lacks a default background, making it transparent, revealing the background.

Despite covering the entire viewport, the element's background does not automatically extend its height; it simply permeates the viewport.

body Selector:

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}

This rule applies color and background styles to the element. All its descendants inherit its color.

Similar to the background, the background is automatically propagated to the element unless explicitly overridden. Therefore, when using a single background, placing it on either the or elements yields no significant difference.

However, combining background styles for and can produce unique effects, as demonstrated here.

Universal Selector (*):

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}

This rule affects every element, nullifying any implicit inheritance. But it's easily overridden by other rules, including the and rules, due to its lack of specificity.

Breaking inheritance with the universal selector is generally discouraged unless absolutely necessary (typically for specific, isolated elements) due to its potential to disrupt inheritance chains for all affected properties.

The above is the detailed content of How Do `html`, `body`, and the Universal Selector (*) Differ in CSS Selector Precedence?. For more information, please follow other related articles on the PHP Chinese website!