CSS !important sääntö

Mikä on !important?

CSS:ssä !important sääntöjä lisätäksesi ominaisuudelle/valuelle suurempaa etusijaa kuin tavallisilla tyyleillä.

Itse asiassa, jos käytät !important säännöistä, jotka peittävät kyseisen ominaisuuden kaikki aikaisemmat tyylimääritykset!

Katsotaan esimerkkiä:

Esimerkki

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

Kokeile itse

Esimerkki selitys

Yllä olevassa esimerkissä kaikki kolme määrittelyä saavat punaisen taustavärin, vaikka ID-valitsin ja luokkavalitsin ovat erityisyydeltään korkeampia.!important säännöt peittävät molemmat nämä tilanteet background-color-ominaisuuden suhteen.

Tärkeät asiat !important:sta

on sisällyttää toinen lauseke, jolla on sama (tai korkeampi) erityisyys lähdekoodiin !important ainoa tapa kattaa !important säännöt - tämä on ongelman lähtökohta! Tämä tekee CSS-koodista sekavaa, ja virheenkorjauskin on vaikeampaa, erityisesti, jos sinulla on suuri tyylimääritys!

Tässä luomme yksinkertaisen esimerkin. Kun tarkastat CSS-lähdettä, et ole erityisen varma, mikä väri on tärkein:

Esimerkki

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

Kokeile itse

Vinkki:Ymmärrä !important sääntö on hyvä. Voit nähdä sen joissakin CSS-lähteissä. Mutta lukuun ottamatta tilanteita, joissa sinun täytyy ehdottomasti käyttää sitä, älä käytä sitä.

voi olla muutamia järkeviä käyttötapoja !important:lle

Yksi käyttötapa !important tilanne on, jos sinun täytyy peittää tyylejä, joita et voi muutoin peittää. Tämä voi johtua siitä, että käytät sisällönhallintajärjestelmää (CMS) ja et voi muokata CSS-koodia. Silloin voit asettaa joitakin mukautettuja tyylejä peittääksesi joitakin CMS-tyylejä.

Toinen käyttötapa !important tilanne on: oletetaan, että haluat, että kaikki painikkeet sivulla ovat erityisilmeisiä. Tässä, painikkeen tyyli on harmaa taustaväri, valkoinen teksti sekä muut sisäiset reunat ja reunaviivat:

Esimerkki

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

Kokeile itse

Jos asetamme painikkeen erityisyydellä varustetun toisen elementin sisään, painikkeen ulkoasu voi joskus muuttua, ja ominaisuudet voivat konfliktoida. Tässä on esimerkki:

Esimerkki

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

Kokeile itse

Jotta kaikki painikkeet näyttäisivät aina samalta, voimme asettaa !important Lisää säännöt painikkeen ominaisuuksiin seuraavasti:

Esimerkki

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

Kokeile itse