En quoi `html`, `body` et le sélecteur universel diffèrent-ils dans le style des éléments HTML ?

Inspection de la distinction dans le style des éléments HTML avec html, body et le sélecteur universel

En fouillant dans les sélecteurs CSS, on peut rencontrer des divergences dans leur comportement lorsqu'ils sont appliqués au même document HTML. Pour explorer ces différences, examinons les scénarios suivants :

1. Sélecteur HTML :

html {
  color: black;
  background-color: white;
}

Ce sélecteur définit les styles pour l'élément HTML le plus externe. Héritant de sa propriété color, tous ses descendants héritent du texte noir, y compris l'élément body. Cependant, la propriété background-color n'est pas héritée, donc l'arrière-plan transparent par défaut de l'élément body reste visible, sauf indication contraire explicite. Notamment, la couleur d'arrière-plan de l'élément HTML remplit la fenêtre même si elle ne s'étend pas sur toute sa hauteur.

2. Sélecteur de corps :

body {
  color: black;
  background-color: white;
}

L'application de styles à l'élément body influence directement tous ses descendants. Comme auparavant, tous les éléments héritent de la propriété color. De plus, la couleur d'arrière-plan de l'élément body est propagée à l'élément html jusqu'à ce qu'un arrière-plan soit défini pour le HTML. Par conséquent, que la première ou la deuxième règle soit utilisée pour le style d'arrière-plan ne fait guère de différence pratique dans la plupart des cas.

3. Sélecteur universel (*) :

* {
  color: black;
  background-color: white;
}

Le sélecteur universel affecte chaque élément, brisant la chaîne d'héritage pour la couleur et la couleur d'arrière-plan. Cette règle peut être remplacée par des sélecteurs plus spécifiques. Bien que son utilisation puisse être utile dans certains scénarios, rompre l'héritage via le sélecteur universel est généralement déconseillé sauf en cas d'absolue nécessité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!