Quel est l’ordre de priorité pour CSS?

J’essaie de comprendre pourquoi l’une de mes classes CSS semble remplacer l’autre (et non l’inverse)

Ici, j’ai deux classes css

.smallbox { background-color: white; height: 75px; width: 150px; font-size:20px; box-shadow: 0 0 10px #ccc; font-family: inherit; } .smallbox-paysummary { @extend .smallbox; font-size:10px; }

et à mon avis, j’appelle

La police (L'élément qui se chevauche) apparaît comme 10px au lieu de 20 - quelqu'un pourrait-il expliquer pourquoi?

Il existe plusieurs règles (appliquées dans cet ordre):

css inline (atsortingbut de style html) remplace les règles CSS dans la balise de style et le fichier css
un sélecteur plus spécifique prévaut sur un sélecteur moins spécifique
les règles qui apparaissent plus tard dans le code remplacent les règles précédentes si les deux ont la même spécificité.
Une règle CSS avec !important toujours la priorité.

Dans votre cas, sa règle 3 s’applique.

Spécificité pour les sélecteurs simples du plus haut au plus bas:

ids (exemple: #main sélectionne
)
classes (ex .: .myclass ), sélecteurs d’atsortingbuts (ex .: [href=^https:] ) et pseudo-classes (ex . :hover )
éléments (ex .: div ) et pseudo-éléments (ex .: ::before )

Pour comparer la spécificité de deux sélecteurs combinés, comparez le nombre d’occurrences de sélecteurs uniques de chacun des groupes de spécificité ci-dessus.

Exemple: compare #nav ul li a:hover #nav ul li.active a::after

compter le nombre de sélecteurs d’identifiant: il y en a un pour chaque ( #nav )
compter le nombre de sélecteurs de classes: il y en a un pour chacun ( :hover et .active )
compter le nombre de sélecteurs d’éléments: il y a 3 ( ul li a ) pour le premier et 4 pour le second ( ul li a ::after ), ainsi le second sélecteur combiné est plus spécifique.

Un bon article sur la spécificité du sélecteur CSS .

Tout d’abord, d’après votre directive @extend , il semble que vous n’utilisiez pas de CSS pur, mais un préprocesseur tel que SASS ou Stylus.

Maintenant, quand on parle d ‘”ordre de priorité” dans CSS, il y a une règle générale impliquée: quelles que soient les règles définies après d’ autres règles (de manière descendante). Dans votre cas, en spécifiant .smallbox après .smallbox-paysummary vous pourrez modifier la priorité de vos règles.

Cependant, si vous voulez aller un peu plus loin, je suggère cette lecture: spécification CSS W3C en cascade . Vous constaterez que la priorité d’une règle est basée sur:

Le type de média actuel;
Importance;
Origine;
Spécificité du sélecteur et enfin notre règle bien connue:
Lequel est le dernier spécifié.

AS est l’état dans W3: W3 Cascade CSS

l’orden que différentes feuilles de style sont appliquées est la suivante (citation de la section en cascade W3):

déclarations d’agent utilisateur
déclarations normales de l’utilisateur
déclarations normales d’auteur
déclarations importantes de l’auteur
déclarations importantes pour l’utilisateur

Plus d’informations à ce sujet dans le document W3 mentionné

 Element, Pseudo Element: d = 1 – (0,0,0,1) Class, Pseudo class, Atsortingbute: c = 1 – (0,0,1,0) Id: b = 1 – (0,1,0,0) Inline Style: a = 1 – (1,0,0,0)

Css inline (atsortingbut de style html) remplace les règles CSS dans la balise de style et le fichier css

Un sélecteur plus spécifique prévaut sur un sélecteur moins spécifique.

Les règles qui apparaissent plus tard dans le code remplacent les règles précédentes si les deux ont la même spécificité.

L’ordre dans lequel les classes apparaissent dans l’élément html n’a pas d’importance. Ce qui compte, c’est l’ordre dans lequel les blocs apparaissent dans la feuille de style.

Dans votre cas, .smallbox-paysummary est défini après .smallbox où la priorité 10px.