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!
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.
Utilisez simplement !important
cela vous aidera à remplacer
background:none !important;
Jetez un coup d'œil à ceci: lorsque vous utilisez-important-est-le-bon-choix
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é).
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?
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
.
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.
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