Dans un en-tête HTML, j’ai ceci:
Title
styles.css
est la feuille spécifique à ma page. master.css
est une feuille que j’utilise sur chacun de mes projets pour remplacer les parameters par défaut du navigateur. Lequel de ces feuilles de style est prioritaire? Exemple: la première feuille contient des informations spécifiques
body { margin:10px; }
Et les frontières associées, mais la seconde contient mes réinitialisations de
html, body:not(input="button") { margin: 0px; padding: 0px; border: 0px; }
Essentiellement, 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?
Les règles pour la mise en cascade des 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 les 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 du fait que la déclaration !important
été utilisée. Lorsque plusieurs règles du même “niveau de spécificité” existent, quelle que soit la dernière victoire apparue.
Le style le plus spécifique est appliqué:
div#foo { color: blue; /* This one is applied to */ } div { color: red; }
Si tous les sélecteurs ont la même spécificité, alors la décélation la plus récente est utilisée:
div { color: red; } div { color: blue; /* This one is applied to */ }
Dans votre cas, body:not([input="button"])
est plus spécifique et ses styles sont utilisés.
L’ordre compte. La dernière valeur déclarée de l’occurrence multiple sera prise. S’il vous plaît voir le même que j’ai travaillé: http://jsfiddle.net/Wtk67/
Hello World!!
Si vous échangez l’ordre de .test{}
, vous pouvez voir que le code HTML prend la valeur du dernier déclaré dans CSS
Le dernier chargement de CSS est THE MASTER, qui remplacera tous les CSS avec les mêmes parameters css
Exemple:
reset.css
h1 { font-size: 20px; }
master.css
h1 { font-size: 30px; }
La sortie pour la balise h1 sera de taille de police: 30px;
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. Alors, 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é.
Essayons de simplifier la règle en cascade avec un exemple. Les règles vont plus spécifiques au général.
Voici le code CSS et HTML;
Voici le style css
Houston Chronicle News
Latest Developments in your city
Next section
Voici le résultat. Indépendamment de l’ordre des fichiers de style ou de la déclaration de style, id="important"
s’applique à la fin (notez la class="deadline"
déclaré en dernier mais ne prend aucun effet).
L’élément
contient l’élément
, mais le dernier style déclaré sera pris en compte, ici l’ 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 locale de publicité de Houston, Black: Section suivante
Le meilleur moyen est d’utiliser les classes autant que possible. Évitez de toute façon les sélecteurs d’identification (#). Lorsque vous écrivez des sélecteurs avec des classes simples, l’inheritance CSS est beaucoup plus facile à suivre.
Mise à jour: En savoir plus sur la spécificité CSS dans cet article: https://css-sortingcks.com/specifics-on-css-specificity/
Je pense que votre question est la suivante: vous avez des sélections en double, un ensemble principal pour toutes les pages et un ensemble plus spécifique que vous souhaitez remplacer par les valeurs principales pour 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 auront la priorité (s’ils sont identiques ou ont le même poids). Il y a une description hautement recommandée de toutes les règles sur ce site Web http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Lorsque j’ai commencé avec le développement front-end, cette page a éclairci tant de questions.
Oui, cela fonctionne de la même manière que s’ils étaient dans une seule feuille, cependant:
Dans le code ci-dessus, il n’y a aucune garantie que master.css
chargera après styles.css
. Par conséquent, si master.css
est chargé rapidement et si styles.css
prend du temps, styles.css
deviendra la deuxième feuille de style et toutes les règles de même spécificité issues de master.css
seront remplacées.
Mieux vaut placer toutes vos règles dans une seule feuille (et la réduire) avant de la déployer.