CSS Die !belangrike reël
Wat is !belangrik?
Die !importantreël in CSS word gebruik om meer belangrikheid aan 'n eiendom/waarde toe te voeg as normaalweg.
Trouens, as jy die !importantreël gebruik, sal dit ALLE vorige stileringsreëls vir daardie spesifieke eiendom op daardie element ignoreer!
Kom ons kyk na 'n voorbeeld:
Voorbeeld
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Voorbeeld Verduidelik
In die voorbeeld hierbo. al drie paragrawe sal 'n rooi agtergrondkleur kry, al het die ID-keurder en die klaskieser 'n hoër spesifisiteit. Die !importantreël oorheers die
background-coloreiendom in beide gevalle.
Belangrik oor !belangrik
!important
Die enigste manier om 'n reël te ignoreer is om 'n ander !important
reël op 'n verklaring met dieselfde (of hoër) spesifisiteit in die bronkode in te sluit - en hier begin die probleem! Dit maak die CSS-kode verwarrend en die ontfouting sal moeilik wees, veral as jy 'n groot stylblad het!
Hier het ons 'n eenvoudige voorbeeld geskep. As u na die CSS-bronkode kyk, is dit nie baie duidelik watter kleur as die belangrikste beskou word nie:
Voorbeeld
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Wenk: Dit is goed om van die !important
reël te weet, jy sal dit dalk in sommige CSS-bronkode sien. Moet dit egter nie gebruik nie, tensy jy absoluut moet.
Miskien een of twee billike gebruike van !belangrik
Een manier om te gebruik !importantis as jy 'n styl moet ignoreer wat nie op enige ander manier omgeskryf kan word nie. Dit kan wees as jy aan 'n inhoudbestuurstelsel (CMS) werk en nie die CSS-kode kan wysig nie. Dan kan jy 'n paar persoonlike style stel om sommige van die CMS-style te ignoreer.
Nog 'n manier om te gebruik !importantis: Neem aan dat jy 'n spesiale voorkoms vir alle knoppies op 'n bladsy wil hê. Hier is knoppies gestileer met 'n grys agtergrondkleur, wit teks, en 'n bietjie opvulling en rand:
Voorbeeld
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Die voorkoms van 'n knoppie kan soms verander as ons dit in 'n ander element met hoër spesifisiteit plaas, en die eienskappe kom in konflik. Hier is 'n voorbeeld hiervan:
Voorbeeld
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Om alle knoppies te "dwing" om dieselfde voorkoms te hê, maak nie saak wat nie, ons kan die !important
reël by die eienskappe van die knoppie voeg, soos volg:
Voorbeeld
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}