Dans quel ordre les feuilles de style CSS sont-elles remplacées?

157

Dans un en-tête HTML, j'ai ceci:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssest ma feuille spécifique à la page. master.cssest une feuille que j'utilise sur chacun de mes projets pour remplacer les valeurs par défaut du navigateur. Laquelle de ces feuilles de style est prioritaire? Exemple: la première feuille contient des

body { margin:10px; }

Et les bordures associées, mais la seconde contient mes réinitialisations de 

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

En substance, l'élément en cascade de CSS fonctionne-t-il de la même manière en termes de références de feuille de style que dans les fonctions CSS typiques? Cela signifie que la dernière ligne est celle affichée?

css overriding stylesheet ian5v
la source
Je viens de me rendre compte que ce serait mieux adapté aux webmasters. Y aurait-il un meilleur endroit pour publier ceci?
ian5v
10
Ici, c'est bien.
Blender
4
body:not(input="button")n'est pas un sélecteur valide d'ailleurs. Vous vouliez probablement le diviser en body, input:not([type="button"]).
BoltClock
C'est intéressant. Je ne crois pas avoir vu une telle syntaxe auparavant. Je suis encore nouveau, mais ces doubles crochets me sont étrangers.
ian5v
ces crochets sont pour les sélecteurs d'attributs: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: vous voulez probablement changer l'ordre des feuilles de style: votre général master.cssdevrait charger en premier, alors il est beaucoup plus facile de remplacer les master-styles de votre styles.css.
grilly

Réponses:

163

Les règles pour la cascade de règles CSS sont complexes - plutôt que d'essayer de les paraphraser mal, je vais simplement vous référer à la spécification:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

En bref: les règles plus spécifiques prévalent sur les règles plus générales. La spécificité est définie en fonction du nombre d'identifiants, de classes et de noms d'élément impliqués, ainsi que du fait que la !importantdéclaration a été utilisée. Lorsqu'il existe plusieurs règles du même «niveau de spécificité», celle qui apparaît en dernier l'emporte.

duskwuff -inactif-
la source
1
Ensuite, il n'y a pas de règle spécifique quant à l'ordre de chargement des feuilles de style? Je comprends comment CSS s'affiche en termes de spécificité, mais je suppose que ma feuille principale se chargera à moins qu'elle ne soit remplacée.
ian5v
11
En fait, !importantparticipe directement à la cascade, et n'a rien à voir avec la spécificité. La spécificité est liée aux sélecteurs, alors qu'elle !importantest utilisée avec les déclarations de propriété. (Vous avez donc raison de dire que les règles sont complexes!;)
BoltClock
2
Alors, les feuilles de style se chargent-elles de la même manière que les éléments, le dernier ayant la priorité si elles sont de même spécificité?
ian5v
3
@iananananan: Fondamentalement, le navigateur ne voit jamais le CSS en termes de feuilles de style individuelles. S'il y a plusieurs feuilles de style, elles sont toutes traitées comme s'il s'agissait d'une seule feuille de style géante et les règles sont évaluées en conséquence.
BoltClock
2
@ user34660 Le commentaire de BoltClock est du point de vue du style CSS. Vous avez raison de dire que les feuilles de style sont séparées dans le DOM, mais cette séparation n'affecte pas la façon dont ces styles sont appliqués à quoi que ce soit.
duskwuff -inactif-
31

Le style le plus spécifique est appliqué:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

Si tous les sélecteurs ont la même spécificité, la déclinaison la plus récente est utilisée:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

Dans votre cas, body:not([input="button"])est plus spécifique donc ses styles sont utilisés.

Mixeur
la source
1
Voir mon commentaire sur la question concernant ce dernier sélecteur.
BoltClock
1
La règle de spécificité rend les choses plus difficiles lorsque nous devons remplacer une feuille de style non modifiable!
Ari
23

L'ordre compte. La dernière valeur déclarée d'occurrence multiple sera prise. S'il vous plaît voir le même que j'ai travaillé: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

Si vous changez l'ordre de .test{}, vous pouvez voir que le HTML prend la valeur du dernier déclaré dans CSS

Roy MJ
la source
3
Vous devez donc ajouter le CSS le plus spécifique en dernier.
live-love
17

Le dernier CSS de chargement est THE MASTER, qui remplacera tous les css avec les mêmes paramètres css

Exemple:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

La sortie de la balise h1 sera police-size: 30px;

Doodl
la source
1
Salut. Dans mon cas, le premier défini .cssest chargé en dernier. Sont-ils appliqués dans l'ordre où ils sont chargés ou dans l'ordre où ils sont définis?
Eugen Konkov
Merci, c'est exactement l'explication que je cherchais.
HunterTheGatherer
7

Essayons de simplifier la règle en cascade avec un exemple. Les règles vont plus spécifiquement au général.

  1. Applique la règle de l'ID en premier (sur la classe et / ou les éléments quel que soit l'ordre)
  2. Applique les classes aux éléments quel que soit l'ordre
  3. Si aucune classe ou id, applique les génériques
  4. Applique le dernier style de l'ordre (ordre de déclaration basé sur l'ordre de chargement des fichiers) pour le même groupe / niveau.

Voici le code css et html;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

Voici le style css

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

Voici le résultat. Peu importe l'ordre des fichiers de style ou la déclaration de style, id="important"s'applique à la fin (notez le class="deadline"dernier déclaré mais ne prend aucun effet).

L' <article>élément contient l' <aside>élément, cependant le dernier style déclaré prendra effet, dans ce cas article h2 { .. } sur le troisième élément h2.

Voici le résultat sur IE11: (Droits insuffisants pour publier une image) DarkBlue: Houston Chronicle News, DarkGreen: Derniers développements dans votre ville, Violet: Houston Section des publicités locales, Noir: Section suivante

entrez la description de l'image ici

Kagan Agun
la source
6

Cela dépend à la fois de l'ordre de chargement et de la spécificité des règles réelles appliquées à chaque style. Compte tenu du contexte de votre question, vous souhaitez d'abord charger votre réinitialisation générale, puis la page spécifique. Ensuite, si vous ne voyez toujours pas l'effet escompté, vous devez examiner la spécificité des sélecteurs impliqués, comme d'autres l'ont déjà souligné.

prodigitalson
la source
2

EDIT: avril 2020, selon le commentaire de @ LeeC, ce n'est plus le cas

Oui, cela fonctionne de la même manière que s'ils étaient sur une seule feuille, cependant:

L'ordre de chargement compte!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

Dans le code ci-dessus, il n'y a aucune garantie qui master.cssse chargera après styles.css. Par conséquent, si master.cssest chargé rapidement, et styles.cssprend un certain temps, styles.cssdeviendra la deuxième feuille de style, et toutes les règles de même spécificité demaster.css seront écrasées.

Il est préférable de mettre toutes vos règles dans une seule feuille (et de les réduire) avant le déploiement.

pseudo
la source
Prenons le cas des feuilles de style alternatives presque identiques chargées à partir de la section <head> d'une page, l'une contenant des attributs multimédias conditionnels pour charger une feuille de style spécifique aux smartphones et tablettes. Dans ce cas, la logique spécifiée dans media doit être strictement exclusive pour chaque feuille de style si l'ordre de chargement est indéterminé.
Lindsay Haisley
@n_i_c_k Votre réponse est incorrecte. L'ordre de déclaration est ce qui compte, pas l' ordre de chargement . Je viens de tester cela avec Fiddler, en arrêtant le téléchargement de master.csset en laissant le styles.csschargement complètement. Ensuite, je laisse master.csscharger. Le style de "chevauchement" de master.csstoujours appliqué - et le rendu a été bloqué jusqu'à ce qu'il soit master.csschargé et analysé. Note : J'ai essayé rel=preloadsur master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`.
LeeC
Merci @LeeC, je sais qu'au moment de la rédaction, ma réponse était correcte, mais je vous crois sur parole qu'elle a été corrigée maintenant et modifier ma réponse.
n_i_c_k
1

La meilleure façon est d'utiliser autant que possible les classes. Évitez de toute façon les sélecteurs d'identification (#). Lorsque vous écrivez des sélecteurs avec des classes uniques, l'héritage CSS est bien plus facile à suivre.

Mise à jour: En savoir plus sur la spécificité CSS dans cet article: https://css-tricks.com/specifics-on-css-specificity/

Jeroen Ooms
la source
1
Voici un excellent article sur la spécificité CSS: css-tricks.com/specifics-on-css-specificity
Jeroen Ooms
0

D'après votre question, je soupçonne que vous avez des sélections en double, un ensemble principal, qui s'applique à toutes les pages, et un ensemble plus spécifique que vous souhaitez remplacer les valeurs principales pour chaque page individuelle. Si tel est le cas, votre commande est correcte. Le Master est chargé en premier et les règles du fichier suivant prévaudront (si elles sont identiques ou ont le même poids). Il y a une description fortement recommandée de toutes les règles sur ce site Web http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Quand j'ai commencé le développement front-end, cette page a résolu de nombreuses questions.

utilisateur3094826
la source
0

C'est le cascade qui définit la priorité des déclarations. Je peux recommander la spécification officielle; cette partie est bien lisible.

https://www.w3.org/TR/css-cascade-3/#cascading

Les éléments suivants ont un effet sur le tri, par ordre de priorité décroissant.

  1. Une combinaison d' origine et d' importance:

    1. Transition déclarations
    2. Déclarations de l'agent utilisateur marquées d'un !important
    3. Déclarations de l'utilisateur marquées d'un !important
    4. Déclarations de l'auteur de la page marquées d'un !important
      1. Définitions sur l'élément avec style attribut
      2. Définitions à l'échelle du document
    5. Animation déclarations
    6. Déclarations de l'auteur de la page
      1. Définitions sur l'élément avec style attribut
      2. Définitions à l'échelle du document
    7. Déclarations de l'utilisateur
    8. Déclarations de l'agent utilisateur

  2. Si deux déclarations ont la même origine et la même importance, la spécificité, c'est -à- dire la clarté de la définition de l'élément, entre en jeu, calculant une notation.

    • 100 points pour chaque identifiant (#x34y )
    • 10 points pour chaque classe (.level )
    • 1 point pour chaque type d'élément (li )
    • 1 point pour chaque pseudo-élément ( :hover) à l'exclusion:not

    Par exemple, le sélecteur main li + .red.red:not(:active) p > *a une spécificité de 24.

  3. L' ordre d'apparition ne joue un rôle que si deux définitions ont la même origine, importance et spécificité. Les définitions ultérieures précèdent les définitions antérieures dans le document (y compris les importations).

Michael Schmid
la source
0

Je crois que lors de l'exécution du code, il est lu de haut en bas, ce qui signifie que le dernier lien CSS remplacerait les styles similaires dans toutes les feuilles de style au-dessus.

Par exemple, si vous avez créé deux feuilles de style 

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

et dans les deux, vous définissez la couleur d'arrière-plan du corps sur deux couleurs différentes - la couleur du corps dans style2.css serait prioritaire.

Vous pouvez éviter le problème de priorité de style en utilisant !IMPORTANTà l'intérieur du style de classe que vous souhaitez privilégier, ou éventuellement en réorganisant votre <link>commande.

Ennam Hoque
la source