CSS De !belangrijke regel
Wat is belangrijk?
De !importantregel in CSS wordt gebruikt om meer belang aan een eigenschap/waarde toe te voegen dan normaal.
Als u de !importantregel gebruikt, worden ALLE eerdere stijlregels voor die specifieke eigenschap op dat element overschreven!
Laten we een voorbeeld bekijken:
Voorbeeld
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Voorbeeld uitgelegd
In bovenstaand voorbeeld. alle drie de alinea's krijgen een rode achtergrondkleur, ook al hebben de ID-kiezer en de klassenkiezer een hogere specificiteit. De !importantregel heft
background-colorin beide gevallen de eigenschap op.
Belangrijk Over !belangrijk
De enige manier om een regel te negeren !important
, is door een andere !important
regel op te nemen in een aangifte met dezelfde (of hogere) specificiteit in de broncode - en hier begint het probleem! Dit maakt de CSS-code verwarrend en het debuggen zal moeilijk zijn, vooral als je een groot stijlblad hebt!
Hier hebben we een eenvoudig voorbeeld gemaakt. Als je naar de CSS-broncode kijkt, is het niet erg duidelijk welke kleur het belangrijkst wordt gevonden:
Voorbeeld
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Tip: Het is goed om te weten wat de !important
regel is, je ziet het misschien in sommige CSS-broncode. Gebruik het echter niet tenzij het absoluut noodzakelijk is.
Misschien een of twee redelijk gebruik van !belangrijk
Een manier om te gebruiken !importantis als u een stijl moet overschrijven die op geen enkele andere manier kan worden overschreven. Dit kan zijn als u werkt aan een Content Management Systeem (CMS) en de CSS-code niet kunt bewerken. Vervolgens kunt u enkele aangepaste stijlen instellen om sommige CMS-stijlen te overschrijven.
Een andere manier om te gebruiken !importantis: Stel dat u een speciaal uiterlijk wilt voor alle knoppen op een pagina. Hier zijn knoppen gestileerd met een grijze achtergrondkleur, witte tekst en wat opvulling en rand:
Voorbeeld
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Het uiterlijk van een knop kan soms veranderen als we deze in een ander element met een hogere specificiteit plaatsen en de eigenschappen met elkaar in conflict komen. Hier is een voorbeeld hiervan:
Voorbeeld
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Om alle knoppen te "dwingen" om hetzelfde uiterlijk te hebben, wat er ook gebeurt, kunnen we de !important
regel toevoegen aan de eigenschappen van de knop, zoals deze:
Voorbeeld
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}