Hogyan működnek a különböző stílusprioritások a CSS-ben?

CSS-ben a stílusprioritásokat a kaskád mechanizmus és a kiválasztók specifikussága határozza meg. A fő elvek a következők:

1. Specifikusság — ez a kiválasztó súlya, amelyet az ID-k, osztályok, tagek és más összetevők száma alapján számítanak ki. Minél magasabb a specifikusság, annál nagyobb a stílus prioritása.

   • Az ID-kiválasztó (#id) magas prioritással bír.
   • Az osztályok (.osztaly), attribútumok és pszeudo-osztályok közepes prioritással rendelkeznek.
   • A tagek (div, p) alacsony prioritással bírnak.

2. Kaskád — ha két szabály ugyanazzal a specifikussággal rendelkezik, akkor az alkalmazódik, amelyik később van deklarálva a kódban.

3. !important — maximális prioritást ad a stílusnak, felülírva más szabályokat, kivéve más !important-okat, amelyek magasabb specifikussággal rendelkeznek.

4. Öröklődés — néhány tulajdonság (color, font-family) öröklődik a szülőtől, ha nincs másképp felülírva.

Példa:

#header { color: red; }       /* specifikusság 100 */
.menu { color: blue; }        /* specifikusság 10  */
div { color: green; }         /* specifikusság 1   */

/* Ha egy elemnek van id="header" és osztály="menu", akkor a szín piros lesz */

Így a böngésző a legmagasabb specifikusságú stílust választja, figyelembe véve a sorrendet és az !important jelenlétét.