Cum funcționează diferitele priorități ale stilurilor în CSS?

În CSS, prioritățile stilurilor sunt determinate de mecanismul de cascadă și de specificitatea selectorilor. Principiile de bază sunt:

1. Specificitatea — este greutatea selectorului, calculată în funcție de numărul de ID-uri, clase, etichete și alte componente. Cu cât specificitatea este mai mare, cu atât stilul are prioritate mai mare.

   • Selectorul ID (#id) are o prioritate ridicată.
   • Clasele (.clasa), atributele și pseudoclasele au o prioritate medie.
   • Etichetele (div, p) au o prioritate scăzută.

2. Cascada — dacă două reguli au aceeași specificitate, se aplică cea declarată mai târziu în cod.

3. !important — adaugă prioritate maximă stilului, suprascrie alte reguli, cu excepția altor !important cu o specificitate mai mare.

4. Moștenirea — unele proprietăți (de exemplu, color, font-family) sunt moștenite de la părinte dacă nu sunt suprascrise.

Exemplu:

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

/* Dacă un element are id="header" și clasa="menu", culoarea va fi roșie */

Astfel, browserul alege stilul cu cea mai mare specificitate, ținând cont de ordine și de prezența !important.