Pravidlá CSS -Priority (hmotnosť)

Vedeli ste, že CSS stanovuje špecifickú váhu pre každé pravidlo štýlu? To je veľmi aspekt CSS, pretože to zabráni akejkoľvek nezrovnalosti medzi tým, čo chcete dostať, a tým, čo dostanete do reality.

Príklad:

Vyskúšajte nasledujúci kód HTML:

 div {farba pozadia: modrá;} 

V dôsledku toho dostanete modrý štvorec 100X100 px.

Pridajte k tomu triedu:

 div {farba pozadia: modrá;}. MaDiv {farba pozadia: červená;} 

Námestie sa zmenilo na červené!

Teraz použite ID:

 div {background-color: blue;} .maDiv {background-color: red;} #maDiv {farba pozadia: žltá;} 

Námestie je teraz žlté, pretože ID je silnejšie ako trieda.

Ďalej použijeme značky štýlu ithe:

 div {farba pozadia: modrá;}. MaDiv {farba pozadia: červená;} # MaDiv {farba pozadia: žltá;} 

Námestie sa zmení na zelené: zatiaľ čo teoreticky mu boli pridelené štyri rôzne farby!

Hmotnosti

Tieto výsledky sú dôsledkom váhy (nazývanej aj prioritné pravidlá) CSS:

• Hmotnosť značky je 1
• Hmotnosť triedy je 10.
• Hmotnosť ID je 100.
• Hmotnosť atribútu štýlu je 1000.

Ide o základnú váhu, existujú iné, napríklad pseudo-triedy (: hover, : after, : focus ...). Príklad atribútu CSS: vznášadlo pridáva do elementu len malú váhu, keď je kurzor myši odovzdaný.

Akumulácia hmotnosti

Pravidlo štýlu potom môže mať strednú hmotnosť. Naozaj, hmotnosť stack.

Príklad:

 div {background-color: blue;} .maDiv {background-color: red;} .maDiv {farba pozadia: žltá;} 

Ako vidíte, mám prvok (hmotnosť 1) a dve rovnaké triedy (hmotnosť 10): posledný prvok preberá a náš štvorec je žltý. Teraz po pridaní

 div {background-color: blue;} div.maDiv {background-color: red;} .maDiv {farba pozadia: žltá;} 

Námestie sa zmení na červené. Prečo?

• ".maDiv" - 10
• "div.maDiv" kombinuje element a triedu - 11!

Upozornenie: niekedy pridanie triedy do pravidla nebude stačiť na zvýšenie váhy všetkých prvkov, ktoré boli zahrnuté.

Poznač si to

Porovnajte výsledok tohto kódu:

 div {background-color: blue;} div # maDiv {farba pozadia: červená;} 

S výsledkom tohto:

 div {background-color: blue;} div #maDiv {farba pozadia: červená;} 

V prvom prípade je náš div červený, v druhom prípade modrý!

"Ale prečo, element + ID =, takže by to malo byť vždy červené!"

Všimnite si jemný rozdiel:

• div # maDiv : platí pre div s ID "maDiv".
• div #maDiv : Vzťahuje sa na všetky prvky, ktorých ID je "maDiv" obsiahnuté v nadradenom prvku s názvom "div".

Naše námestie sa zaoberá iba prvým pravidlom. Ako všeobecné pravidlo, vždy dávajte pozor na to, ako píšete svoje pravidlá, správne používať medzery, čiarky

Príklady:

• p .myClass a {} : pre všetky odkazy obsiahnuté v ľubovoľnom prvku, ktorého trieda je "myClass", všetky sú obsiahnuté v ľubovoľnom

  element. Hmotnosť: 12.

• p.myClass, a {} : pre všetky odkazy a všetky

  ktorých trieda je "myClass". Hmotnosť: 11 alebo 1

• p, .myClass, a {} : pre všetky odkazy a všetky prvky, ktorých trieda je "myClass" a všetky

  element. Hmotnosť: 1 až 10 alebo 1