Pravidla CSS -Priority (hmotnost)

Věděli jste, že CSS má konkrétní váhu pro každé pravidlo stylu? To je velmi aspekt CSS, protože se vyhne všem nesrovnalostem mezi tím, co chcete získat, a tím, co dostanete do reality.

Příklad:

Vyzkoušejte následující kód HTML:

 div {barva pozadí: modrá;} 

Výsledkem bude modrý čtverec 100X100 px.

Nyní k ní přidejte třídu:

 div {background-color: blue;}. MaDiv {barva pozadí: červená;} 

Náměstí se změnilo na červené!

Nyní použijte ID:

 div {background-color: blue;} .maDiv {background-color: red;} #maDiv {barva pozadí: žlutá;} 

Náměstí je nyní žluté, protože ID je silnější než třída.

Další použití a definuje značky ithe stylu:

 div {background-color: blue;}. MaDiv {barva pozadí: červená;} # MaDiv {barva pozadí: žlutá;} 

Náměstí se změní na zelené: zatímco teoreticky mu byly přiřazeny čtyři různé barvy!

Váhy

Tyto výsledky jsou důsledky váhy (nazývané také pravidla priority) CSS:

• Hmotnost značky je 1
• Váha třídy je 10.
• Hmotnost ID je 100.
• Hmotnost atributu stylu je 1000.

Jedná se o základní váhu, existují další, například pseudo-třídy (: hover, : after, : focus ...). Příklad atributu CSS: vznášecí prvek přidává prvek jen malou váhu, když je kurzor myši předán.

Akumulace hmotnosti

Pravidlo stylu pak může mít střední hmotnost. Opravdu, váha zásobníku.

Příklad:

 div {background-color: blue;} .maDiv {background-color: red;} .maDiv {barva pozadí: žlutá;} 

Jak vidíte, mám prvek (hmotnost 1) a dvě stejné třídy (hmotnost 10): poslední prvek převezme a naše náměstí je žluté. Nyní po přidání

 div {background-color: blue;} div.maDiv {background-color: red;} .maDiv {barva pozadí: žlutá;} 

Náměstí se změní na červenou. Proč?

• ".maDiv" - 10
• "div.maDiv" kombinuje prvek a třídu - 11!

Varování: někdy přidání třídy do pravidla nebude stačit ke zvýšení váhy všech prvků, které byly zahrnuty.

Všimněte si, že

Porovnejte výsledek tohoto kódu:

 div {background-color: blue;} div # maDiv {pozadí-barva: červená;} 

S tímto výsledkem:

 div {background-color: blue;} div #maDiv {background-color: red;} 

V prvním případě je naše div červená, ve druhém případě modrá!

"Ale proč, element + ID =, takže by to mělo být vždy červené!"

Všimněte si jemného rozdílu:

• div # maDiv : platí pro div s ID "maDiv".
• div #maDiv : Platí pro všechny elementy, jejichž ID je "maDiv" obsažené v rodičovském elementu nazvaném "div".

Naše náměstí se zabývá pouze prvním pravidlem. Obecně platí, že vždy dávejte pozor na to, jak píšete svá pravidla, správně používejte mezery, čárky…

Příklady:

• p .myClass a {} : pro všechny odkazy obsažené v jakémkoliv prvku, jehož třída je "myClass", všechny obsažené v libovolném

  živel. Hmotnost: 12.

• p.myClass, a {} : pro všechny odkazy a všechny

  jehož třída je "myClass". Hmotnost: 11 nebo 1

• p, .myClass, a {} : pro všechny odkazy a všechny prvky, jejichž třída je "myClass" a všechny

  živel. Hmotnost: 1 až 10 nebo 1