24. Co to jest specyficzność w CSS i jak działa w przypadku konfliktów stylów?

Specyficzność określa, które style mają pierwszeństwo w przypadku konfliktów. Wyższa specyficzność nadpisuje niższą.

• Ilość ID (Najwyższa specyficzność): Każdy selektor ID w regule zwiększa specyficzność o 100.

  • Przykład: #element ma wyższą specyficzność niż .klasa.

• Ilość klas i atrybutów: Każda klasa lub atrybut w selektorze zwiększa specyficzność o 10.

  • Przykład: .klasa ma wyższą specyficzność niż element.

• Ilość elementów i pseudo-klas: Każdy element lub pseudo-klasa (np. :hover) w selektorze zwiększa specyficzność o 1.

  • Przykład: div ma wyższą specyficzność niż :hover.

• !important (Najwyższa specyficzność): Wartość deklaracji CSS z !important ma najwyższą specyficzność i zawsze nadpisuje inne style.

Jeśli dochodzi do konfliktu między stylami, przeglądarka zastosuje reguły z wyższą specyficznością. W przypadku, gdy specyficzność jest taka sama, przeglądarka zastosuje reguły, które pojawiają się później w kodzie (zasada kaskady).

Przykłady specyficzności:

• #element jest bardziej specyficzne niż .klasa.
• .klasa1.klasa2 jest bardziej specyficzne niż .klasa1.
• div p jest bardziej specyficzne niż p.
• .klasa !important ma najwyższą specyficzność i zawsze ma pierwszeństwo.

Prawidłowe zrozumienie specyficzności jest istotne, aby unikać nieoczekiwanych konfliktów w kodzie CSS i skutecznie kontrolować, które style zostaną zastosowane do elementów HTML. W praktyce zaleca się unikanie nadmiernego używania !important i tworzenia zbyt złożonych selektorów, aby zachować czytelność i kontrolę nad kodem CSS.