CSS !important regel

Hvad er !important?

CSS'en !important Reglen bruges til at give egenskab/værdi en højere prioritet end normal stil.

Faktisk, hvis du bruger !important Reglen vil overridde alle tidligere stilregler for den specifikke egenskab på elementet!

Lad os se på et eksempel:

Eksempel

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

Prøv det selv

Eksempel på forklaring

I det ovennævnte eksempel vil alle tre afsnit få en rød baggrundsfarve, selvom ID-vælgeren og klassevælgeren har højere specifikitet.!important Reglen overrider background-color-egenskaben i begge tilfælde.

Vigtige oplysninger om !important

Overridning !important Det eneste måde at overridde en regel på er ved at inkludere en anden erklæring med samme (eller højere) specifikitet i kildekoden !important Regler - dette er begyndelsen på problemet! Det gør CSS-koden kaotisk, og fejlfinding bliver svær, især når du har store stilark!

Her har vi oprettet et simpelt eksempel. Når du ser på CSS-kilden, er det ikke helt klart, hvilken farve der betragtes som den vigtigste:

Eksempel

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

Prøv det selv

Tip:Forstå !important Reglen er god. Du kan muligvis se det i nogle CSS-kilder. Men brug det ikke, medmindre du absolut skal.

Der kan være et par rimelige brug af !important

En anden brug !important Situation er, hvis du skal overridde styling, der ikke kan overrides på anden vis. Dette kan skyldes, at du bruger et indholdshåndteringsværktøj (CMS) og ikke kan redigere CSS-koden. Så kan du indstille nogle brugerdefinerede stilarter for at overridde nogle CMS-stilarter.

En anden brug !important Situationen er: antag, at du vil have, at alle knapper på siden har en speciel udseende. Her er knoppens stil med en grå baggrundsfarve, hvid tekst og nogle indre marginer og kanter:

Eksempel

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

Prøv det selv

Hvis vi placerer knappen i et andet element med højere specifikitet, kan knoppens udseende ændre sig, og egenskaberne kan konfliktere. Her er et eksempel:

Eksempel

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

Prøv det selv

For at 'tvunge' alle knapper til at have samme udseende hele tiden, kan vi sætte !important Tilføj regler til egenskaberne på knappen, som vist nedenfor:

Eksempel

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

Prøv det selv