Comprendre la priorité des styles en CSS : explication de l'ordre de priorité des styles CSS

Cet article vous présente la priorité du style CSS et vous donne une compréhension approfondie de l'ordre de priorité du style CSS.

Avez-vous déjà été dans une situation où vous avez essayé d'appliquer un style CSS à un élément, mais cela n'a eu aucun effet ? La page semble ignorer le CSS que vous avez défini, mais vous ne pourrez peut-être pas comprendre pourquoi. Peut-être que vous le ferez ! important ou ajoutez des styles en ligne en dernier recours. Mais en réalité, le problème que vous rencontrez est probablement l’une des priorités CSS. (Cours recommandé : Tutoriel vidéo CSS)

Une meilleure compréhension des styles CSS à utiliser en premier peut rendre l'écriture de code CSS plus claire et plus organisée, examinons donc le contrôle du code HTML donné. Trois règles CSS pour éléments :

calcul de la priorité CSS

héritage CSS

cascading CSS

L'apprentissage de ces règles permettra d'amener votre développement CSS au niveau supérieur niveau suivant.

Calcul de priorité

Imaginez que votre code HTML contient un paragraphe auquel est appliqué un type de "créature". Vous disposez également des deux règles CSS suivantes :

p { font-size ：12px }
p.bio { font-size ：14px }

Voulez-vous que la taille du texte dans le paragraphe soit de 12 px ou 14 px ? Dans ce cas, vous pouvez deviner que ce sera 14px. La deuxième ligne de CSS (p.bio) est plus spécifique que votre paragraphe class="bio". Cependant, les priorités ne sont parfois pas faciles à déterminer.

Par exemple, considérons le HTML et le CSS suivants

<div id = “sidebar” >
<p class = “bio” >文字在这里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

À première vue, la première ligne de CSS peut sembler plus spécifique, mais en fait la deuxième ligne ci-dessus est plus cohérent avec la taille de la police du paragraphe. pourquoi donc?

Pour répondre à cette question, nous devons considérer les règles de priorité.

La spécificité est calculée en comptant les différents composants du CSS et en les exprimant sous la forme (a, b, c, d). Cela sera plus clair avec un exemple, mais d'abord les composants.

élément, pseudo-élément : d = 1 - (0,0,0,1)

classe, pseudo-classe, attribut : c = 1 - (0,0,1, 0)

Id : b = 1 - (0,1,0,0)

Style en ligne : a = 1 - (1,0,0,0)

L'identifiant est plus spécifique que la classe plutôt que l'élément.

Vous pouvez calculer la priorité en calculant chacun des éléments ci-dessus et en ajoutant 1 à a, b, c ou d. Il est également important de noter que 0,0,1,0 est plus spécifique que 0,0,0,15. Regardons quelques exemples pour rendre le calcul plus clair.

p : 1 élément - (0,0,0,1)

div : 1 élément - (0,0,0,1)

#sidebar :1 élément, 1 identifiant - (0,1,0,0)

div#sidebar : 1 élément, 1 identifiant - (0,1,0,1)

div#sidebar p : 2 éléments, 1 identifiant - (0,1,0,2)

div#sidebar p.bio : 2 éléments, 1 classe, 1 identifiant - (0,1,1 ,2)

Regardons à nouveau l'exemple ci-dessus

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

Le second a une priorité plus élevée et est donc prioritaire.

Un dernier point avant d'aller de l'avant. L’importance l’emporte sur la priorité lorsque vous l’utilisez ! Lorsque vous marquez l'attribut CSS comme important, vous remplacez les règles de priorité, etc.

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

signifie que la première ligne de CSS ci-dessus a priorité sur la deuxième ligne au lieu de la seconde. ! ce qui est important reste la spécificité des règles de base dont vous ne devriez jamais avoir besoin si vous comprenez comment les règles fonctionnent.

Héritage

L'idée derrière l'héritage est relativement facile à comprendre. Les éléments héritent des styles de leur conteneur parent. Si la balise body est définie pour utiliser color:red, alors le texte de tous les éléments du corps sera également rouge, sauf indication contraire.

Cependant, toutes les propriétés CSS ne sont pas héritées. Par exemple, les marges et le remplissage sont des propriétés non héritées. Si vous définissez des marges ou un remplissage sur un div, les paragraphes à l'intérieur du div n'hériteront pas des marges et du remplissage que vous avez définis sur le div. Le paragraphe utilisera les marges et le remplissage par défaut du navigateur jusqu'à ce que vous déclariez le contraire.

Cependant, vous pouvez définir explicitement des propriétés pour hériter des styles de son conteneur parent. Par exemple, vous pourriez déclarer

p { margin ：inherit ; 填充：继承 }

et votre paragraphe hériterait de son élément conteneur.

Cascading

Au plus haut niveau, la cascade contrôle toutes les priorités CSS et fonctionne comme suit.

1. Recherchez toutes les déclarations CSS qui s'appliquent aux éléments et attributs associés.

2. Trier par origine et poids. L'origine fait référence à la source de la déclaration (style de l'auteur, style de l'utilisateur, valeur par défaut du navigateur) et le poids fait référence à l'importance de la déclaration. (Le poids de l'auteur est supérieur à celui de l'utilisateur qui est supérieur à la valeur par défaut. !important est plus important que la déclaration normale)

3 Calculez la priorité

Si deux règles parmi toutes les règles ci-dessus sont les mêmes, alors la dernière règle l'emporte. Le CSS intégré dans le HTML vient toujours après la feuille de style externe, quel que soit l'ordre dans le HTML.

Le numéro 3 ci-dessus est probablement ce à quoi vous devez le plus prêter attention. Avec #2, comprenez simplement que vos styles remplaceront la façon dont les utilisateurs configurent leur navigateur à moins qu'ils ne définissent la règle comme importante.

Sachez également que vos styles remplaceront les valeurs par défaut du navigateur, mais ces valeurs par défaut existent et provoquent souvent des problèmes entre navigateurs. L'utilisation d'un fichier de réinitialisation comme CSS Reset d'Eric Meyer ou YUI Reset CSS de Yahoo permet de supprimer les styles par défaut de l'équation.

Résumé

J'espère que ce qui précède vous aidera à clarifier certains de vos problèmes prioritaires CSS. La plupart du temps, si vos styles sont en conflit, le problème se résumera à des priorités. Parfois, vous n'avez pas déclaré de CSS, mais un élément se comporte d'une manière inattendue. Il peut avoir hérité de certains CSS du conteneur parent ou des styles par défaut du navigateur.

La règle générale lors de la déclaration CSS est de déclarer l'attribut avec la priorité la plus basse pour styliser un élément. Par exemple, utilisez #sidebar au lieu de div#sidebar. J'avoue avoir enfreint cette règle générale bien plus que je ne le devrais, mais en utilisant la priorité minimale requise, il vous sera plus facile de remplacer les styles en en déclarant des styles plus spécifiques.

Si vous utilisez la priorité la plus élevée, vous risquez de rencontrer des problèmes plus tard et de devoir ajouter du HTML inutile pour pouvoir ajouter plus de priorités, ou vous pourriez vous retrouver à ne plus l'utiliser ! important ou déclarez le style en ligne. Commencez par la plus petite priorité et ajoutez-en davantage uniquement lorsque cela est nécessaire.

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!