Kā darbojas dažādas stilu prioritātes CSS?

CSS stilāju prioritātes tiek noteiktas, izmantojot kaskādes mehānismu un selektoru specifiku. Galvenie principi ir:

1. Specifikācija — tas ir selektora svars, kas tiek aprēķināts, ņemot vērā ID, klases, tagus un citus komponentus. Jo augstāka specifika, jo prioritāte ir lielāka.

   • ID selektors (#id) ir ar augstu prioritāti.
   • Klases (.klase), atribūti un pseido-klases ir ar vidēju prioritāti.
   • Tagi (div, p) ir ar zemu prioritāti.

2. Kaskāde — ja divas noteikumu kopas ir ar vienādu specifiku, tiek piemērots tas, kas deklarēts vēlāk kodā.

3. !important — piešķir maksimālo prioritāti stilam, pārspējot citus noteikumus, izņemot citus !important ar augstāku specifiku.

4. Mantošana — dažas īpašības (color, font-family) tiek mantojamas no vecāka, ja tās nav pārdefinētas.

Piemērs:

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

/* Ja elements ir ar id="header" un klasi="menu", krāsa būs sarkana */

Tādējādi pārlūkprogramma izvēlas stilu ar visaugstāko specifiku, ņemot vērā secību un !important klātbūtni.