CSS !important Rule

wat is !important?

in CSS !important de regel gebruikt om de prioriteit van een eigenschap/waarde hoger te stellen dan de gewone stijl.

echt, als je !important de regel, die alle eerdere stijlregels voor die specifieke eigenschap overwrite!

laten we een voorbeeld bekijken:

Example

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

Try It Yourself

voorbeeld uitleg

in het bovenstaande voorbeeld krijgen alle drie de paragrafen een rode achtergrondkleur, ondanks dat de ID-selector en de class-selector een hogere specifiekeiteit hebben.!important de regel overwrite de achtergrondkleur-eigenschap in beide gevallen.

belangrijke punten over !important

overwrite !important de enige manier om de regel te overwrite is door een andere verklaring met dezelfde (of hogere) specifiekeiteit in de broncode op te nemen !important de regel - dit is het begin van het probleem! Dit maakt de CSS-code rommelig en het debuggen moeilijk, vooral als je een grote stijlstapel hebt!

hier hebben we een eenvoudig voorbeeld gemaakt. Wanneer je de CSS-broncode bekijkt, is het niet duidelijk welke kleur als het belangrijkste wordt beschouwd:

Example

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Try It Yourself

tip:verkrijg !important de regel is goed. Je kunt het misschien in sommige CSS-bronnen zien. Maar gebruik het niet tenzij je absoluut moet.

er kunnen een paar redelijke situaties zijn voor het gebruik van !important

een andere manier van gebruik !important de situatie is, als je stijlen moet overwrites die je op geen andere manier kunt overwrite. Dit kan zijn omdat je een content management systeem (CMS) gebruikt en je CSS-code niet kunt wijzigen. Dan kun je enkele aangepaste stijlen instellen om bepaalde CMS-stijlen te overwrite.

een andere manier van gebruik !important de situatie is: stel dat je wilt dat alle knoppen op de pagina een speciale look hebben. Hier is de stijl van de knop grijs achtergrondkleur, witte tekst en enige binnenafstand en rand:

Example

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Try It Yourself

Als we de knop plaatsen in een ander element met een hogere specifieke eigenschap, kan het uiterlijk van de knop soms veranderen en kunnen er conflicten optreden. Hier is een voorbeeld:

Example

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Try It Yourself

To 'force' all buttons to have the same appearance at all times, we can use !important Add the rules to the button's properties as shown below:

Example

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Try It Yourself