CSS-!important-regel

Vad är !important?

i CSS !important regeln för att ge attribut/värde en högre prioritet än vanliga stilar.

Faktiskt, om du använder !important regeln kommer att överstiga alla tidigare stilregler för det specifika attributet på elementet!

Låt oss se ett exempel:

Exempel

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

Prova själv

Exempel förklaring

I det ovanstående exemplet kommer alla tre paragrafer att få en röd bakgrundsfärg, trots att ID-väljaren och klassväljaren har högre specifikitet.!important regeln täcker båda dessa fall av background-color-egenskapen.

Viktiga saker att veta om !important

att täcka !important det enda sättet att överstiga !important regeln - det är början på problemet! Det gör CSS-koden kaotisk och felsökning blir svår, särskilt om du har stora stylarkatter!

Här har vi skapat ett enkelt exempel. När du tittar på CSS-källkoden är det inte särskilt klart vilken färg som anses vara viktigast:

Exempel

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

Prova själv

Tips:Förstå !important regeln är bra. Du kan se det i vissa CSS-källkoder. Men använd det inte om du inte absolut måste.

kan finnas ett eller två rimliga användningar av !important

En annan användning !important situations är när du måste överstiga stilar som inte kan överstiga på annat sätt. Detta kan bero på att du använder ett innehållshanteringssystem (CMS) och inte kan redigera CSS-koden. Då kan du ställa in några anpassade stilar för att överstiga vissa CMS-stilar.

En annan användning !important situations är: antar att du vill att alla knappar på sidan ska ha ett speciellt utseende. Här är stilen för knappen: grå bakgrundsfärg, vit text och något innerv的空间和边框：

Exempel

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

Prova själv

Om vi lägger till knappen i ett annat element med högre specifikitet, kan knappens utseende ibland förändras och egenskaper kan kollidera. Här är ett exempel:

Exempel

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

Prova själv

För att 'tvång' att alla knappar alltid har samma utseende, kan vi sätta !important Lägg till regler till egenskaperna för knappen, som visas nedan:

Exempel

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

Prova själv