Comment remplacer les propriétés d'une classe CSS à l'aide d'une autre classe CSS
Je suis assez nouveau en CSS3 et je veux être en mesure de faire ce qui suit:
Quand j'ai ajouter une classe dans un élément, il remplace les propriétés d'une autre classe utilisée dans cet élément.
Disons que j'ai
<a class="left carousel-control" href="#carousel" data-slide="prev">
Je veux être en mesure d'ajouter une classe appelée bakground-none
, qui pourra remplacer l'arrière-plan par défaut dans la classe left
.
Merci!
Vous devez vous connecter pour publier un commentaire.
Il y a différentes façons dont les propriétés peuvent être remplacées. En supposant que vous avez
par exemple de remplacer:
Les deux premiers “gagner” par le sélecteur de spécificité; la troisième, que l'on gagne par
!important
, un instrument contondant.Vous pouvez également organiser vos feuilles de style, de sorte que, par exemple, la règle
gagne tout simplement par ordre, c'est à dire en étant après un autre tout aussi “puissant” de la règle. Mais cela impose des restrictions et vous oblige à être prudent dans la réorganisation des feuilles de style.
Ce sont tous des exemples de la Cascade CSS, primordial, mais très mal compris le concept. Il définit les règles exactes pour résoudre les conflits entre les règles de feuilles de style.
P. S. j'ai utilisé
left
etbackground-none
comme ils ont été utilisés dans la question. Ils sont des exemples de noms de classe qui devrait pas être utilisés, car ils reflètent rendu spécifique et non structurelle ou sémantique des rôles.left
etbackground-none
- elle être évitée?button
,name-label
, etc.). D'autres estiment que CSS devient ingérable si vous utilisez cette approche et vous devez utiliser "utilitaire d'abord" ou "fonctionnelle" css où les classes correspondent à des valeurs de propriété (par exemple,margin-top-4
,width-10
, etc.). Historiquement, la "sémantique" de la démarche a été dominant tout récemment le "fonctionnel" approche a été gagne des adeptes. Essayez les deux sur un projet de moyenne envergure et ensuite décider pour vous-même qui est supérieur.Suffit d'utiliser
!important
il vous aidera à remplacerPrendre un coup d'oeil à ceci : quand-aide-important-est le bon choix
Comme une alternative à la
important
mot-clé, vous pouvez utiliser le sélecteur plus spécifiques,par exemple:
(Note: pas d'espace entre les noms de classe).
Dans ce cas, la règle s'applique lorsque les deux
.left
et.background-none
sont répertoriés dans l'attribut de classe (quel que soit l'ordre ou de proximité).Vous devez remplacer par l'augmentation de Spécificité de votre style. Il y a différentes façons d'augmenter la Spécificité. L'utilisation de
!important
les effets de la spécificité, est un mauvaise pratique parce qu'il rompt naturel en cascade dans votre feuille de style.Diagramme suivant prises de css-tricks.com vous aidera à produire de droit de la spécificité de votre élément basé sur une structure de points. Selon la spécificité a le plus de points sera le gagnant. Sonne comme un jeu - n'est-ce pas?
Checkout un exemple de calcul, ici sur css-tricks.com. Cela vous aidera à comprendre le concept très bien et il ne vous prendra 2 minutes.
Si vous puis de produire et/ou de comparer les différentes spécificités par vous-même, essayez cette Spécificité de la Calculatrice: https://specificity.keegan.st/ ou vous pouvez simplement utiliser traditionnel papier/crayon.
Pour plus de lecture essayez MDN Web Docs.
Tout le meilleur pour ne pas utiliser
!important
.Si vous la liste des
bakground-none
classe 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:
et
Le lien ne sera pas avoir un arrière-plan rouge. Veuillez noter que ceci ne remplace les propriétés qui ont un sélecteur qui est inférieure ou égale spécifiques.
PRINCIPE est le moyen le navigateur analyse des propriétés CSS..Si vous êtes à l'aide de Sass déclarer une variable appelée comme
de l'utiliser au lieu de directement de l'attribution des valeurs comme le rouge ou le bleu.
Lorsque vous voulez remplacer juste réaffecter la valeur de
puis
il devrait remplacer en douceur. À l'aide de "!important" n'est pas toujours le bon choix..c'est juste un correctif