Quel est l'ordre de priorité des 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

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

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

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

1. css en ligne (attribut de style html) remplace les règles css dans la balise de style et le fichier css
2. un sélecteur plus spécifique a priorité sur un sélecteur moins spécifique
3. les règles qui apparaissent plus loin dans le code remplacent les règles antérieures si les deux ont la même spécificité.
4. Une règle css avec a !importanttoujours la priorité.

Dans votre cas, c'est la règle 3 qui s'applique.

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

• ids (exemple: #mainsélectionne <div id="main">)
• classes (ex .: .myclass), sélecteurs d'attributs (ex .: [href=^https:]) et pseudo-classes (ex .: :hover)
• des éléments (ex .: div) et des 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: comparer #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 classe: il y en a un pour chaque ( :hoveret .active)
• compter le nombre de sélecteurs d'éléments: il y en a 3 ( ul li a) pour le premier et 4 pour le second ( ul li a ::after), donc le second sélecteur combiné est plus spécifique.

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

Voici une compilation de l'ordre de style CSS dans un diagramme, sur lequel les règles CSS ont une priorité plus élevée et ont priorité sur le reste:

Clause de non - responsabilité : Mon équipe et moi avons travaillé cette pièce avec un article de blog ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) qui, je pense, sera utile à tous les front-end développeurs.

Ce que nous examinons ici s'appelle la spécificité comme indiqué par Mozilla :

La spécificité est le moyen par lequel les navigateurs décident quelles valeurs de propriété CSS sont les plus pertinentes pour un élément et, par conséquent, seront appliquées. La spécificité est basée sur les règles de correspondance qui sont composées de différents types de sélecteurs CSS.

La spécificité est une pondération appliquée à une déclaration CSS donnée, déterminée par le numéro de chaque type de sélecteur dans le sélecteur correspondant. Lorsque plusieurs déclarations ont la même spécificité, la dernière déclaration trouvée dans le CSS est appliquée à l'élément. La spécificité s'applique uniquement lorsque le même élément est ciblé par plusieurs déclarations. Conformément aux règles CSS, les éléments directement ciblés auront toujours la priorité sur les règles dont un élément hérite de son ancêtre.

J'aime l' explication 0-0-0 sur https://specifishity.com :

Tout à fait descriptif l'image de la !importantdirective! Mais parfois, c'est le seul moyen de remplacer l' styleattribut en ligne . C'est donc une bonne pratique d'essayer d'éviter les deux.

Tout d'abord, d'après votre @extenddirective, il semble que vous n'utilisiez pas du CSS pur, mais un préprocesseur tel que SASS os Stylus.

Maintenant, quand nous parlons d '«ordre de priorité» en CSS, il y a une règle générale impliquée: quelles que soient les règles définies après les autres règles (de manière descendante) sont appliquées. Dans votre cas, juste en spécifiant .smallboxaprès, .smallbox-paysummaryvous pourrez modifier la priorité de vos règles.

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

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

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

l'ordre selon lequel différentes feuilles de style sont appliquées est le suivant (citation de la section en cascade de W3):

1. déclarations d'agent utilisateur

2. déclarations normales de l'utilisateur

3. auteur des déclarations normales

4. auteur de déclarations importantes

5. déclarations importantes de l'utilisateur

Plus d'informations à ce sujet dans le document W3 référencé

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

Dans votre cas .smallbox-paysummaryest défini après .smallboxdonc la priorité de 10px.

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

Le css en ligne (attribut de style html) remplace les règles css dans la balise de style et le fichier css

Un sélecteur plus spécifique a priorité sur un sélecteur moins spécifique.

Les règles qui apparaissent plus loin dans le code remplacent les règles antérieures si les deux ont la même spécificité.

Il est également important de noter que lorsque vous avez deux styles sur un élément HTML avec une priorité égale, le navigateur donnera la priorité aux styles qui ont été écrits en dernier dans le DOM ... donc si dans le DOM:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... la largeur du div sera de 50px