CSS -Prioriteto taisyklės (svoris)

Ar žinojote, kad CSS kiekvienam stiliaus taisyklei nustato konkretų svorį? Tai labai svarbus CSS aspektas, nes vengs neatitikimų tarp to, ką norite gauti ir ką jūs gaunate iš tikrųjų.

Pavyzdys:

Išbandykite šį HTML kodą:

 div {fono spalva: mėlyna;} 

Kaip rezultatas, gausite mėlyną kvadratą 100X100 px.

Dabar pridėkite prie klasės:

 div {fono spalva: mėlyna;}. MaDiv {fono spalva: raudona;} 

Kvadratas tapo raudonas!

Dabar naudokite ID:

 div {fono spalva: mėlyna;} .maDiv {fono spalva: raudona;} #maDiv {fono spalva: geltona;} 

Dabar aikštė yra geltona, nes ID yra stipresnis nei klasė.

Kitas naudojimas a apibrėžia stiliaus žymas:

 div {fono spalva: mėlyna;}. MaDiv {fono spalva: raudona;} # MaDiv {fono spalva: geltona;} 

Kvadratas tampa žalias: nors teoriškai jai priskirtos keturios skirtingos spalvos!

Svoriai

Šie rezultatai yra svorio pasekmės (dar vadinamos prioritetinėmis taisyklėmis) CSS:

• Žymos svoris yra 1
• Klasės svoris yra 10.
• ID svoris yra 100.
• Stiliaus atributo svoris yra 1000.

Tai yra pagrindinis svoris, yra ir kitų, pavyzdžiui, pseudo klasės (: hover, : po, : focus ...). CSS atributo pavyzdys: kai pelės žymeklis perduodamas, elementas tik šiek tiek padidina elementą.

Svorio kaupimas

Tada stiliaus taisyklė gali turėti tarpinį svorį. Iš tiesų, svorio krūva.

Pavyzdys:

 div {fono spalva: mėlyna;} .maDiv {fono spalva: raudona;} .maDiv {fono spalva: geltona;} 

Kaip matote, turiu elementą (svoris 1) ir dvi lygias klases (svoris 10): perima paskutinį elementą ir mūsų kvadratas yra geltonas. Dabar pridėjus

 div {fono spalva: mėlyna;} div.maDiv {fono spalva: raudona;} .maDiv {fono spalva: geltona;} 

Kvadratas tampa raudonas. Kodėl?

• ".maDiv" - 10
• "div.maDiv" sujungia elementą ir klasę - 11!

Įspėjimas: kartais priskyrus klasę prie taisyklės, nepakanka visų dalyvaujančių elementų svoriui padidinti.

Prisimink tai

Palyginkite šio kodo rezultatus:

 div {fono spalva: mėlyna;} div # maDiv {fono spalva: raudona;} 

Šio rezultato rezultatas:

 div {fono spalva: mėlyna;} div #maDiv {fono spalva: raudona;} 

Pirmuoju atveju mūsų div yra raudona, antrajame - mėlyna!

"Bet kodėl, elementas + ID =, todėl jis visada turėtų būti raudonas!"

Atkreipkite dėmesį į subtilų skirtumą:

• div # maDiv : taikoma divui su „maDiv“ ID.
• div #maDiv : Taikoma visiems elementams, kurių ID yra „maDiv“, esantis pagrindiniame elemente „div“.

Mūsų aikštė susijusi tik su pirmąja taisykle. Paprastai visada atkreipkite dėmesį į tai, kaip rašote taisykles, tinkamai naudokite tarpus, kablelius

Pavyzdžiai:

• p .myClass a {} : visoms nuorodoms, esančioms bet kuriame elemente, kurio klasė yra „myClass“, visos yra bet kuriame

  elementas. Svoris: 12.

• p.myClass, a {} : visoms nuorodoms ir visiems

  kurio klasė yra „myClass“. Svoris: 11 arba 1

• p, .myClass, a {} : visoms nuorodoms ir visiems elementams, kurių klasė yra „myClass“ ir visi

  elementas. Svoris: nuo 1 iki 10 arba 1