Remplacer les styles sans !important

Question

Comment est-il possible de remplacer les styles spécifiés dans une autre feuille de style ?

Je ne veux pas utiliser la balise !important pour les remplacer. Je préférerais définir une nouvelle feuille de style et y placer les styles. Pourrait-on y parvenir en modifiant l'ordre de chargement des feuilles de style ?

Answer 1

Cela dépend. CSS est l'acronyme de Cascading Style Sheets (feuilles de style en cascade). Les styles sont appliqués dans un ordre spécifique qui remplace les styles précédents. Sans entrer dans les détails :

• Si vos règles ont la même spécificité, il suffit de charger votre feuille de style en second et tout fonctionnera bien.
• Si vos règles sont plus spécifiques, l'ordre n'aura pas d'importance.
• Si vos règles sont moins spécifiques, vous devrez les modifier pour qu'elles correspondent.

Alors, qu'est-ce que la spécificité ? En gros, c'est la somme de chaque sélecteur dans une règle. Donc ça :

a {
    background-color: black;
    color: white;
}

C'est moins précis que ça :

body a {
    color: orange;
}

Les sélecteurs d'ID ont une spécificité plus élevée que les sélecteurs de classe, qui ont la même spécificité que les sélecteurs de pseudo-classe, qui ont une spécificité plus élevée que les sélecteurs de balises. Ainsi, si tout votre contenu est contenu dans un <div> avec un id de content vous pourriez remplacer un style qui ressemble à ceci :

body a {
    border: 0;
}

Avec :

#content a {
    border: 1px solid black;
}

Answer 2

La feuille de style de boostrap doit être chargée en premier, votre feuille de style en second, de cette façon vos écrasements seront récupérés.

C'est ce qu'on appelle la "cascade", d'après la documentation :

En cascade

Il s'agit de la possibilité offerte par certains langages de feuilles de style tels que CSS de mélanger des informations de style provenant de plusieurs sources. sources. Il peut s'agir, par exemple, de directives de style d'entreprise, des styles communs à un groupe de documents et des styles spécifiques à un seul document. document. En les stockant séparément, les feuilles de style peuvent être réutilisées, ce qui simplifie la création et permet une utilisation plus efficace du réseau. réseau. La cascade définit une séquence ordonnée de feuilles de style dans laquelle les règles des dernières feuilles ont une plus grande priorité que celles des premières. Pas Tous les langages de feuilles de style ne prennent pas en charge les cascades.

Answer 3

Si vous pouvez augmenter le spécificité des styles vous pouvez le faire sans le !important .

Par exemple :

HTML

<div id="selector">
  <a>Hello</a>
  <a class="specific">Hi</a>
</div>

CSS

div a {}

Seront ignorés, si vous donnez une classe spécifique à l'intérieur de #selector

.specific { }

Voici un Démonstration pour expliquer mon point de vue. En gros, l'idée est de définir les styles aussi étroitement que possible.

Answer 4

Regardez http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html .

<p class="example">
    This is a <strong>test</strong>.
</p>

strong { color: red; }
p strong { color: green; }
p.example strong { color: blue; }

Le texte sera bleu. L'ordre des règles n'a pas d'importance.