web-dev-qa-db-fra.com

Dans quel ordre les feuilles de style CSS remplacent-elles?

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.css est ma fiche spécifique à la page. master.css est une feuille que j'utilise dans chacun de mes projets pour remplacer les paramètres par défaut du navigateur. Laquelle de ces feuilles de style a la priorité? Exemple: la première feuille contient des informations spécifiques

body { margin:10px; }

Et les frontières associées, mais le second 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 classiques? Ce qui signifie que la dernière ligne est celle affichée?

cssoverridingstylesheet
146
ian5v

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

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

En bref: des règles plus spécifiques prévalent sur des règles plus générales. La spécificité est définie en fonction du nombre d'ID, de classes et de noms d'éléments impliqués, ainsi que de l'utilisation éventuelle de la déclaration !important. Lorsque plusieurs règles du même "niveau de spécificité" existent, celle qui apparaît en dernier l'emporte.

151
duskwuff

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écélération 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 et ses styles sont utilisés.

29
Blender

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é sur: 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{}, alors vous pouvez voir que le HTML prend la valeur du dernier déclaré en CSS

23
Roy M J

Le dernier chargement CSS 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 font-size: 30px;

15
Doodl

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

  1. Applique en premier la règle de l'ID (sur la classe et/ou les éléments indépendamment de l'ordre)
  2. Applique des classes sur des éléments indépendamment de l'ordre
  3. Si aucune classe ou id, applique les génériques
  4. Applique le dernier style de la commande (ordre de déclaration basé sur l'ordre de chargement du fichier) 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. Quel que soit l'ordre des fichiers de style ou la déclaration de style, id="important" s'applique à la fin (notez le class="deadline" déclaré en dernier mais ne prend aucun effet).

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

Voici le résultat sur IE11: (Pas assez de droits pour publier une image) DarkBlue: Houston Chronicle News, DarkGreen: derniers développements dans votre ville, Violet: Section de la publicité locale de Houston, Noir: Section suivante

enter image description here

7
Kagan Agun

Cela dépend à la fois de l'ordre de chargement et de la spécificité des règles 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 recherché, vous devez vous pencher sur la spécificité des sélecteurs impliqués, comme d’autres l’ont déjà fait remarquer.

6
prodigitalson

Oui, cela fonctionne comme si elles étaient dans une seule feuille, cependant:

L'ordre de charge est important!

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

Dans le code ci-dessus, rien ne garantit que master.css sera chargé après styles.css. Par conséquent, si master.css est chargé rapidement et que styles.css prend un certain temps, styles.css deviendra la deuxième feuille de style et toutes les règles de même spécificité de master.css seront remplacées.

Il est préférable de mettre toutes vos règles sur une seule feuille (et de les minimiser) avant de les déployer.

1
n_i_c_k

Le meilleur moyen consiste à utiliser les classes autant que possible. Évitez les sélecteurs d'ID (#) de toute façon. Lorsque vous écrivez des sélecteurs avec une seule classe, l'héritage CSS est beaucoup plus facile à suivre.

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

0
Jeroen Ooms

D'après votre question, je suppose 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 par les valeurs principales de chaque page. Si tel est le cas, votre commande est correcte. Le maître est chargé en premier et les règles du fichier suivant ont priorité (si elles sont identiques ou ont le même poids). Il est vivement recommandé de décrire toutes les règles sur ce site Web http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Quand je commencé avec le développement front-end, cette page a éclairci beaucoup de questions.

0
user3094826