Wyjaśnij, jak przeglądarka określa, które elementy mają mieć zastosowane style CSS.

Przeglądarka określa, które elementy mają mieć zastosowane style CSS, korzystając z mechanizmów wyszukiwania i dopasowania opartych na selektorach CSS.

Proces przebiega następująco:

1. Parsowanie CSS: Przeglądarka analizuje pliki CSS i bloki <style> w HTML, tworząc wewnętrzną reprezentację stylów.
2. Parsowanie HTML: Przeglądarka analizuje HTML, tworząc Drzewo DOM (Document Object Model).
3. Dopasowanie (Matching): Dla każdego węzła w Drzewie DOM, przeglądarka próbuje dopasować go do reguł CSS. Robi się to poprzez sprawdzanie selektorów w regułach CSS. Zazwyczaj, przeglądarka działa od bardziej specyficznych części selektora do mniej specyficznych (z prawej na lewą). Na przykład, dla selektora div article p, najpierw znajdzie p, potem sprawdzi, czy jest potomkiem article, który z kolei jest potomkiem div.
4. Zastosowanie (Applying): Jeśli węzeł DOM pasuje do jednej lub kilku reguł CSS, przeglądarka stosuje odpowiednie style do tego węzła. W przypadku wielu obowiązujących reguł, przeglądarka ustala końcowy zestaw stylów, korzystając z reguł specyficzności, kolejności deklaracji i dziedziczenia.

Specyficzność (Specificity):

Specyficzność to algorytm używany przez przeglądarkę do obliczania wagi selektora CSS. Bardziej specyficzny selektor ma wyższy priorytet przy stosowaniu stylów. Oblicza się ją na podstawie liczby ID, klas/pseudoklas/atrybutów i elementów/pseudoelementów w selektorze.

// a = liczba ID
// b = liczba klas, pseudoklas, atrybutów
// c = liczba elementów, pseudoelementów
// Style inline mają najwyższy priorytet (1, 0, 0, 0)
// Selektor `*` ma specyficzność (0, 0, 0)

Przykład obliczania specyficzności:

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

Kolejność deklaracji:

Jeśli dwie reguły mają tę samą specyficzność, stosuje się tę, która została zadeklarowana jako ostatnia w kodzie CSS.

Dziedziczenie (Inheritance):

Niektóre właściwości CSS są dziedziczone od elementów rodziców do potomków (np. color, font-family). Jeśli dla właściwości nie ustawiono jawnej wartości na elemencie, przeglądarka szuka dziedziczonej wartości w górę po Drzewie DOM.

W ten sposób, przeglądarka określa style dla elementu, dopasowując selektory, rozwiązując konflikty za pomocą specyficzności i kolejności deklaracji, a także uwzględniając dziedziczenie.