Hoe werken de verschillende prioriteiten van stijlen in CSS?

In CSS worden de prioriteiten van stijlen bepaald door het kaskademechanisme en de specificiteit van selectors. De belangrijkste principes zijn:

1. Specificiteit — dit is het gewicht van de selector, berekend op basis van het aantal ID's, klassen, tags en andere componenten. Hoe hoger de specificiteit, hoe prioriteitiger de stijl.

   • De ID-selector (#id) heeft een hoge prioriteit.
   • Klassen (.klasse), attributen en pseudoklassen hebben een gemiddelde prioriteit.
   • Tags (div, p) hebben een lage prioriteit.

2. Kaskade — als twee regels dezelfde specificiteit hebben, wordt degene die later in de code is gedeclareerd toegepast.

3. !important — voegt de maximale prioriteit toe aan de stijl, overschrijft andere regels, behalve andere !important met een hogere specificiteit.

4. Erfenis — sommige eigenschappen (bijvoorbeeld color, font-family) worden geërfd van de ouder als ze niet worden overschreven.

Voorbeeld:

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

/* Als een element id="header" en klasse="menu" heeft, wordt de kleur rood */

Op deze manier kiest de browser de stijl met de hoogste specificiteit, rekening houdend met de volgorde en de aanwezigheid van !important.