Est-ce que l'ordre des définitions des feuilles de style css est important?
j'ai plusieurs feuilles de style. La première est une feuille de style avec quelques styles que je voudrais utiliser par défaut. Selon plusieurs facteurs, le code utilisé pour générer la page peut inclure des feuilles de style avec des valeurs qui devraient annuler les valeurs par défaut.
si j'utilise ceci, puis-je avoir confiance que les valeurs de la feuille de style par défaut seront supplantées par les valeurs des autres feuilles de style? J'utilise des sélecteurs de classe et j'outrepasserai les valeurs quand les noms correspondre.
<link href="defaults.css" rel="stylesheet" type="text/css"/>
<link href="valuestooverridedefaults.css" rel="stylesheet" type="text/css"/>
Cela doit fonctionner sur tous les navigateurs, y compris mobile. J'aimerais éviter d'avoir à utiliser "!important", si possible.
Merci!
7 réponses
Il est défini cascade dans lequel les styles sont triés et appliquée. Lorsque les déclarations ont le même de l'importance (poids),origine et spécificité alors la dernière déclaration gagne. La plupart des réponses couvrent importance et spécificité ici, mais pas origine.
Voici quelques très bonnes diapos sur CSS Cascades.
si les sélecteurs sont identiques, le dernier chargé a priorité, comme si vous aviez déclaré la même classe deux fois dans la même feuille de style.
si vous avez défini le style d'un sélecteur dans plus d'un fichier css, le style du dernier fichier CSS chargé sera pris
si je l'utilise, Puis-je faire confiance que les valeurs dans la feuille de style par défaut seront remplacées par les valeurs de l'autre feuille de style? Je suis à l'aide de sélectionne les classes et outrepassera les valeurs lorsque les noms correspondent.
La réponse est "oui", comme vous l'avez remarqué, lorsque les sélecteurs sur la deuxième feuille sont identiques à la première.
!important sera l'exception, donc l'éviter, comme vous avez aussi remarqué.
Oui, c'est ainsi que les feuilles de style fonctionnent. La dernière que l'on gagne.
assurez-vous simplement que la spécificité de la feuille de style par défaut n'est pas supérieure à votre override. Et oui, à éviter !important si vous le pouvez. C'est tout simplement ridicule.
yep - l'indice se trouve sur les feuilles de style du nom "cascade". Donc, une ligne de style écrase un style qui est définie dans la tête et un style dans la tête va écraser un style dans une feuille de style. La dernière charge de feuille de style pourrait écraser les styles de la précédente. Si vous utilisez quelque chose comme firebug ou l'inspecteur dans chrome il vous montrera d'où chaque style est venu ou ce qu'il a overiden.
La réponse simple est oui. Tout style re-déclaré plus bas dans les pages écrasera les classes déclarées plus tôt dans le chargement de la page.
Pour que cela fonctionne, la deuxième déclaration de la classe doit être en possession de l'héritage.
Classes comme .contenu{} et .corps. le contenu{} peut se comporter différemment lorsqu'il hérite de styles.