communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Français

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

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

Barbara Streisand

Libérer： 2024-11-28 12:06:16

original

398 Les gens l'ont consulté

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

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 :

<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;

Copier après la connexion

}

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 :

<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;

Copier après la connexion

}

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

<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;

Copier après la connexion

}

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!

source：php.cn

Article précédent：Comment puis-je créer automatiquement une mise en page de texte sur deux colonnes avec CSS ? Article suivant：Quels sont les meilleurs points d'arrêt de requête multimédia CSS pour une conception Web réactive ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2408

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2538

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2152

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...