web-dev-qa-db-fra.com

Ordre de priorité lors de l'utilisation de plusieurs fichiers CSS contradictoires

Lorsque j'utilise plusieurs fichiers CSS sur la même page et qu'ils entrent en collision, comment savoir lequel va être utilisé? Par exemple, si l'un dit l'arrière-plan du corps bleu et l'autre dit le rouge.

cssstylesheet
48
Filip Haglund

Réponse rapide:

Si les deux éléments CSS ont la même spécificité (par exemple, ils sont tous les deux body{), celui qui sera appelé LAST remplacera le précédent.

MAIS, si quelque chose a une spécificité plus élevée (un sélecteur plus spécifique), il sera utilisé quelle que soit la commande.

Exemple 1: 

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

L'exemple ci-dessus rendra la couleur rouge . Les deux sélecteurs sont identiques et ont donc également la même spécificité. Et parce que CSS lit de haut en bas, nous lui disons d'abord qu'il est bleu, mais ensuite nous le remplaçons en lui disant "ne rien faire, faites-le rouge".

Exemple 2: 

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

L'exemple ci-dessus rendra la couleur d'arrière-plan bleue , même si le bleu était le premier parce que le sélecteur est plus "spécifique" .

Exception (l'utilisation de !important):

L'inclusion de ! Important remplacera à la fois la spécificité et l'ordre, mais à mon avis, ne devrait être utilisé que si vous essayez de jouer avec un code tiers dans lequel vous n'avez pas accès au changement autrement.

CSS externe:

Les règles d'écrasement fonctionnent de la même manière sur les fichiers CSS externes. Imaginez simplement les mettre de l'avant-dernier, de haut en bas. Les sélecteurs appelés dans le ou les premiers fichiers seront remplacés par des sélecteurs de même spécificité dans les fichiers suivants. Mais la spécificité l'emportera toujours sur l'ordre dans le même fichier ou dans plusieurs fichiers.

Comment tester:

Dans Chrome, Firefox et les versions modernes de IE (probablement Safari aussi), vous pouvez cliquer avec le bouton droit sur quelque chose et cliquer sur "Inspecter l'élément". Cela vous montrera le HTML ainsi que tout CSS appliqué. . Lorsque vous faites défiler le CSS (généralement sur la droite), vous verrez des éléments biffés - cela signifie qu'ils sont soit CSS incorrects, soit écrasés. Pour tester, vous pouvez modifier les sélecteurs CSS (soit dans votre propre code ou juste là dans la boîte des outils de développement) pour les rendre plus spécifiques et voir si cela fait alors non barré ... etc. Jouez avec cet outil - c'est TRÈS utile.

78
Dave