Reguły CSS-Priority (waga)

Czy wiesz, że CSS przypisuje określoną wagę do każdej reguły stylu? Jest to bardzo ważny aspekt CSS, ponieważ pozwoli uniknąć niespójności między tym, co chcesz uzyskać, a tym, co dostajesz w rzeczywistości.

Przykład:

Wypróbuj następujący kod HTML:

 div {background-color: blue;} 

W rezultacie otrzymasz niebieski kwadrat 100X100 px.

Teraz dodaj do niego klasę:

 div {background-color: blue;}. MaDiv {background-color: red;} 

Plac stał się czerwony!

Teraz użyj identyfikatora:

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

Kwadrat jest teraz żółty, ponieważ identyfikator jest silniejszy niż klasa.

Następnie użyj stylu definiującego tagi:

 div {background-color: blue;}. MaDiv {background-color: red;} # MaDiv {background-color: yellow;} 

Kwadrat zmienia kolor na zielony: w teorii przypisano mu cztery różne kolory!

Ciężary

Te wyniki są konsekwencją wagi (zwanej również regułami priorytetu) CSS:

• Waga tagu wynosi 1
• Waga klasy wynosi 10.
• Waga identyfikatora wynosi 100.
• Waga atrybutu stylu wynosi 1000.

Są to podstawowe wagi, są na przykład inne pseudoklasy (: hover, : po, : focus ...). Przykład atrybutu CSS: hover dodaje tylko niewielką wagę do elementu, gdy kursor myszy zostanie pominięty.

Nagromadzenie ciężaru

Reguła stylu może mieć wtedy wagę pośrednią. Rzeczywiście, stos wagowy.

Przykład:

 div {background-color: blue;} .maDiv {background-color: red;} .maDiv {background-color: yellow;} 

Jak widać, mam element (waga 1) i dwie równe klasy (waga 10): ostatni element przejmuje i nasz kwadrat jest żółty. Teraz po dodaniu

 div {background-color: blue;} div.maDiv {background-color: red;} .maDiv {background-color: yellow;} 

Kwadrat zmienia kolor na czerwony. Czemu?

• „.maDiv” - 10
• „div.maDiv” łączy element i klasę - 11!

Ostrzeżenie: czasami dodanie klasy do reguły nie wystarczy, aby zwiększyć wagę wszystkich zaangażowanych elementów.

Zauważ, że

Porównaj wynik tego kodu:

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

W wyniku tego:

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

W pierwszym przypadku nasz div jest czerwony, w drugim jest niebieski!

„Ale dlaczego, element + ID =, więc powinien być zawsze czerwony!”

Zwróć uwagę na subtelną różnicę:

• div # maDiv : dotyczy div z identyfikatorem „maDiv”.
• div #maDiv : Dotyczy wszystkich elementów, których identyfikator to „maDiv”, zawartych w elemencie nadrzędnym o nazwie „div”.

Nasz plac dotyczy tylko pierwszej zasady. Zgodnie z ogólną zasadą, zawsze zwracaj uwagę na to, jak piszesz swoje reguły, poprawnie używaj spacji, przecinków itp

Przykłady:

• p .myClass a {} : dla wszystkich linków zawartych w dowolnym elemencie, którego klasą jest „myClass”, wszystkie zawarte w dowolnym

  element. Waga: 12.

• p.myClass, a {} : dla wszystkich linków i wszystkich

  którego klasą jest „myClass”. Waga: 11 lub 1

• p, .myClass, a {} : dla wszystkich linków i wszystkich elementów, których klasa to „myClass” i wszystkie

  element. Waga: 1 do 10 lub 1