Community

Articles Topics Q&A

Learn

Course Programming Dictionary

Tools Library

Development tools Website Source Code PHP Libraries JS special effects Website Materials Extension plug-ins

Leisure

Game Download Game Tutorials

English

简体中文 English 繁体中文 日本語 한국어 Melayu Français Deutsch

Login

singup

Home > Web Front-end > CSS Tutorial > How Do `html`, `body`, and the Universal Selector (*) Differ in CSS Selector Precedence?

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

Barbara Streisand

Release： 2024-11-28 12:06:16

Original

360 people have browsed it

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:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

Copy after login

Copy after login

Copy after login

}

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:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

Copy after login

Copy after login

}

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 (*):

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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!