web-dev-qa-db-fra.com

Comment remplacer les propriétés d'une classe CSS à l'aide d'une autre classe CSS

Je suis assez nouveau sur CSS3 et je veux pouvoir effectuer les tâches suivantes:

Lorsque j'ajoute une classe à un élément, il remplace les propriétés d'une autre classe utilisée dans cet élément spécifique.

Disons que j'ai

<a class="left carousel-control" href="#carousel" data-slide="prev">

Je veux pouvoir ajouter une classe appelée bakground-none, qui remplacera l'arrière-plan par défaut de la classe left.

Merci!

cssclassoverride
64
user3075049

Les propriétés peuvent être remplacées de différentes manières. En supposant que vous avez

.left { background: blue }

par exemple. l'un des éléments suivants l'aurait annulée:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

Les deux premiers «gagnent» par spécificité de sélecteur; le troisième gagne par !important, un instrument contondant.

Vous pouvez également organiser vos feuilles de style afin que, par exemple, la règle

.background-none { background: none; }

gagne simplement par ordre, c'est-à-dire en étant après une règle par ailleurs tout aussi «puissante». Mais cela impose des restrictions et vous oblige à faire preuve de prudence dans toute réorganisation des feuilles de style.

Ce sont tous des exemples du CSS Cascade , un concept crucial mais largement incompris. Il définit les règles exactes de résolution des conflits entre les règles de la feuille de style.

P.S. J'ai utilisé left et background-none comme ils ont été utilisés dans la question. Ce sont des exemples de noms de classe qui devraient être utilisés not, car ils reflètent un rendu spécifique et non des rôles structurels ou sémantiques.

68
Jukka K. Korpela

Utilisez simplement !important cela vous aidera à remplacer 

background:none !important;

Jetez un coup d'œil à ceci: lorsque vous utilisez-important-est-le-bon-choix

50
Pranav C Balan

Au lieu du mot clé important, vous pouvez préciser le sélecteur, par exemple:

.left.background-none { background:none; }

(Remarque: pas d'espace entre les noms de classe).

Dans ce cas, la règle s'appliquera lorsque .left et .background-none seront répertoriés dans l'attribut de classe (indépendamment de l'ordre ou de la proximité).

23
Marc Audet

Vous devez remplacer en augmentant Specificity de votre style. Il y a différentes manières d'augmenter la spécificité. L'utilisation de !important, qui affecte la spécificité, est une mauvaise pratique car elle rompt la cascade naturelle dans votre feuille de style. 

Le diagramme suivant tiré de css-tricks.com vous aidera à produire la spécificité appropriée pour votre élément en vous basant sur une structure de points. Quelle que soit la spécificité qui a des points plus élevés, va gagner. Cela ressemble à un jeu - n'est-ce pas?

 enter image description here

Exemples de calcul de commande ici sur css-tricks.com . Cela vous aidera à bien comprendre le concept et cela ne vous prendra que 2 minutes. 

Si vous souhaitez ensuite produire et/ou comparer différentes spécificités par vous-même, essayez ce calculateur de spécificité: https://specificity.keegan.st/ ou vous pouvez simplement utiliser du papier/un crayon traditionnel. 

Pour en savoir plus, essayez MDN Web Docs .

Tout le meilleur pour ne pas utiliser !important.

12
Undefined

Si vous répertoriez la classe bakground-none après les autres classes, ses propriétés remplacent celles déjà définies. Il n'est pas nécessaire d'utiliser !important ici.

Par exemple:

.red { background-color: red; }
.background-none { background: none; }

et

<a class="red background-none" href="#carousel">...</a>

Le lien n'aura pas de fond rouge. Veuillez noter que cela remplace uniquement les propriétés ayant un sélecteur plus ou moins spécifique.

7
Ruud

LIFO est la manière dont le navigateur analyse les propriétés CSS. Si vous utilisez Sass, déclarez une variable appelée 

"$ header-background: red;"

utilisez-le au lieu d'affecter directement des valeurs telles que le rouge ou le bleu . lorsque vous souhaitez remplacer, il vous suffit de réaffecter la valeur à 

"$ header-background: blue"

puis

couleur de fond: $ header-background;

il devrait remplacer en douceur. Utiliser "! Important" n’est pas toujours le bon choix .. C’est juste un correctif

0
Ignatius Andrew