Lorsque vous utilisez plusieurs fichiers CSS sur la même page et qu'ils entrent en collision, comment puis-je savoir lequel va être utilisé? Par exemple, si l’un dit fond de corps bleu et l’autre dit rouge.
Réponse
Trop de publicités?
Si les deux morceaux de CSS ont la même spécificité - par exemple ils sont tous les deux "corps" {", puis selon ce qui est appelé en DERNIER remplace le précédent.
MAIS si quelque chose a une spécificité plus élevée (plus précisément le sélecteur), il sera utilisé quel que soit l'ordre. Par exemple:
<div id="myDiv"></div>
/* CSS: */
#myDiv { background-color: blue; }
div { background-color: red; }
Cela permettrait de rendre l'arrière-plan de couleur bleu, même si le bleu a été d'abord parce que le sélecteur d'id est plus spécifique que le général div sélecteur d'élément.
L'inclusion de !important remplace à la fois la spécificité et l'ordre, mais, au moins, à mon avis, doit être utilisé uniquement si vous êtes en train de jouer avec un code tiers dans lequel vous n'avez pas accès à la modifier de toute autre façon.
Remarque: Remplacer les règles de travail de la même manière sur les fichiers CSS externes. Imaginez mettre de la première à la dernière, de haut en bas. Les sélecteurs appelé dans le premier(s) sera remplacé par la même spécificité des sélecteurs dans tous les fichiers.
Comment faire pour tester:
Dans Chrome, Firefox et moderne versions d'IE (probablement Safari trop), vous pouvez faire un clic droit sur quelque chose et cliquez sur "Inspecter l'Élément". Cela va vous montrer le code HTML ainsi que toute appliqué CSS. Lorsque vous faites défiler la CSS, vous verrez des choses qui sont barré - cela signifie qu'ils sont soit incorrect CSS ou ont été écrasés. Pour tester, vous pouvez modifier les sélecteurs CSS pour les rendre plus précis et de voir si ça fait de l'onu-barré...etc. Jouer w/ cet outil est TRÈS utile.
