Erklären Sie, wie der Browser bestimmt, auf welche Elemente CSS-Stile angewendet werden sollen.

Der Browser bestimmt, welche Elemente mit CSS-Stilen versehen werden, indem er Such- und Abgleichmechanismen auf Basis von CSS-Selektoren verwendet.

Der Prozess läuft wie folgt ab:

1. CSS-Parsing: Der Browser analysiert CSS-Dateien und <style>-Blöcke im HTML und erstellt eine interne Darstellung der Stile.
2. HTML-Parsing: Der Browser analysiert das HTML und erstellt den DOM-Baum (Document Object Model).
3. Matching: Für jeden Knoten im DOM-Baum versucht der Browser, ihn mit CSS-Regeln abzugleichen. Dies geschieht durch Überprüfung der Selektoren in den CSS-Regeln. Der Browser arbeitet in der Regel von spezifischeren Teilen des Selektors zu weniger spezifischen (von rechts nach links). Zum Beispiel findet er bei div article p zuerst p, dann prüft er, ob es ein Nachkomme von article ist, der wiederum ein Nachkomme von div ist.
4. Anwendung: Wenn ein DOM-Knoten mit einer oder mehreren CSS-Regeln übereinstimmt, wendet der Browser die entsprechenden Stile auf diesen Knoten an. Bei mehreren anwendbaren Regeln bestimmt der Browser die endgültige Stilmenge anhand von Spezifität, Reihenfolge der Deklarationen und Vererbung.

Spezifität:

Die Spezifität ist ein Algorithmus, den der Browser verwendet, um das Gewicht eines CSS-Selektors zu berechnen. Ein spezifischerer Selektor hat eine höhere Priorität bei der Anwendung von Stilen. Die Spezifität wird anhand der Anzahl von ID, Klassen/Pseudoklassen/Attributen und Elementen/Pseudoelementen im Selektor berechnet.

// a = Anzahl der IDs
// b = Anzahl der Klassen, Pseudoklassen, Attribute
// c = Anzahl der Elemente, Pseudoelemente
// Inline-Stile haben die höchste Priorität (1, 0, 0, 0)
// Der Selektor `*` hat die Spezifität (0, 0, 0)

Beispiel für die Berechnung der Spezifität:

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Reihenfolge der Deklarationen:

Wenn zwei Regeln die gleiche Spezifität haben, gilt die zuletzt im CSS-Code deklarierte Regel.

Vererbung:

Einige CSS-Eigenschaften werden von den Elternelementen auf die Kindelemente vererbt (z.B. color, font-family). Wenn für eine Eigenschaft kein expliziter Wert auf einem Element festgelegt ist, sucht der Browser nach einem vererbten Wert nach oben im DOM-Baum.

Auf diese Weise bestimmt der Browser die Stile für ein Element, indem er Selektoren abgleicht, Konflikte durch Spezifität und Reihenfolge der Deklarationen löst und die Vererbung berücksichtigt.