En quoi `html`, `body` et le sélecteur universel (*) diffèrent-ils dans la priorité du sélecteur CSS ?

Priorité du sélecteur CSS : html, corps et sélecteur universel* (Mise à jour)

La question se pose : en quoi trois règles diffèrent-elles lorsque appliqué au même document HTML ? Explorons les effets distinctifs de ces sélecteurs : html, body et le sélecteur universel *.

Sélecteur html :

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

}

Cette règle applique les styles de couleur et d'arrière-plan au élément. Ses descendants héritent de la couleur mais pas de l'arrière-plan, y compris le élément. Le L'élément n'a pas d'arrière-plan par défaut, ce qui le rend transparent, révélant l'attribut arrière-plan.

Bien qu'il couvre toute la fenêtre d'affichage, l'icône l'arrière-plan de l'élément n'étend pas automatiquement sa hauteur ; il imprègne simplement la fenêtre d'affichage.

Sélecteur de corps :

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

}

Cette règle applique les styles de couleur et d'arrière-plan au élément. Tous ses descendants héritent de sa couleur.

Semblable au arrière-plan, le l'arrière-plan est automatiquement propagé au élément à moins qu’il ne soit explicitement remplacé. Par conséquent, lorsque vous utilisez un seul arrière-plan, placez-le soit sur le champ ou éléments ne produit aucune différence significative.

Cependant, la combinaison des styles d'arrière-plan pour et peut produire des effets uniques, comme démontré ici.

Sélecteur universel (*):

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

}

Cette règle affecte chaque élément, annulant tout héritage implicite. Mais elle est facilement remplacée par d'autres règles, notamment la règle et règles, en raison de son manque de spécificité.

La rupture de l'héritage avec le sélecteur universel est généralement déconseillée sauf en cas d'absolue nécessité (généralement pour des éléments spécifiques et isolés) en raison de son potentiel à perturber les chaînes d'héritage pour toutes les propriétés affectées.

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!