CSS !important Rule

Ano ang !important?

CSS ang !important alituntunin upang magbigay ng mas mataas na prayoridad sa attribute/value kaysa sa pangkaraniwang estilo.

Sa katunayan, kapag gumamit ka ng !important Ang alituntunin na ito ay magiging mapanindigan ng lahat ng naunang alituntunin ng partikular na attribute sa elemento.

Hayaan natin makita ang isang halimbawa:

Example

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

Try It Yourself

Halimbawa ng paliwanag

Sa pagkatapos na halimbawa, ang tatlong pangungusap na ito ay makakakuha ng kulay red na background, kahit na ang selector ng ID at class ay may mas mataas na pagpipilian.!important Ang alituntunin ay nasa parehong dalawang sitwasyon sa attribute ng background-color.

Mahalaga na malaman ang !important

Pagsasakop !important Ang tanging paraan para mapanindigan ang alituntunin ay sa pamamagitan ng paglalagay ng isa pang pahayag na may magkaparehong (o mas mataas na) pagpipilian sa source code. !important Ang alituntunin - ito ang simula ng problema! Ito ay magiging magulo ang CSS code at mahirap na ma-debug, lalo na kapag mayroon kang malaking stylesheet.

Dito nakikita natin ang isang simpleng halimbawa. Kapag binubusog mo ang CSS source code, hindi masyadong malinaw kung anong kulay ang pinaniniwalaang pinakamahalaga:

Example

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

Try It Yourself

Mga Tip:Unawain mo ito: !important Ang alituntunin ay mabuti. Maaaring makita mo ito sa ilang CSS source code. Subalit, maliban na lamang kung talagang kailangan mo ito, huwag gumamit nito.

Maaaring may ilang makatuwirang paggamit ng !important

Isang uri ng paggamit !important Ang sitwasyon ay, kapag kailangan mong takpan ang estilo na hindi maaaring takpan nang ibang paraan. Maaring ito ay dahil gumagamit ka ng Content Management System (CMS) at hindi mo pwedeng i-edit ang CSS code. Pagkatapos, maaari mong itakda ang ilang custom style upang takpan ang ilang CMS style.

Isang uri ng paggamit !important Ang sitwasyon ay: kapag gusto mong na ang lahat ng button sa pahina ay may espesyal na hitsura. Dito, ang estilo ng button ay ang kulay asul na background, puting teksto, at ilang padding at border:

Example

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

Try It Yourself

Kung ilagay natin ang button sa ibang elemento na may mas mataas na pagpipilian, maaaring magbago ang hitsura ng button at may magkakontra na attribute. Narito ang isang halimbawa:

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