Обяснете как браузърът определя върху кои елементи трябва да се прилагат CSS стилове.

Браузърът определя към кои елементи да прилага CSS стилове, използвайки механизми за търсене и съвпадение, базирани на CSS селектори.

Процесът протича по следния начин:

1. Парсиране на CSS: Браузърът анализира CSS файловете и блоковете <style> в HTML, създавайки вътрешно представяне на стиловете.
2. Парсиране на HTML: Браузърът анализира HTML и създава дървото DOM (Document Object Model).
3. Съвпадение: За всеки възел в дървото DOM, браузърът се опитва да го съвпадне с правилата CSS. Това става чрез проверка на селекторите в правилата CSS. Обикновено, браузърът работи от по-специфичните части на селектора към по-малко специфичните (отдясно наляво). Например, за селектора div article p, първо намира p, след това проверява дали е потомък на article, който от своя страна е потомък на div.
4. Прилагане: Ако възелът DOM съвпада с една или повече CSS правила, браузърът прилага съответните стилове към този възел. В случай на няколко приложими правила, браузърът определя крайния набор от стилове, използвайки правила за специфичност, реда на декларациите и наследяването.

Специфичност:

Специфичността е алгоритъм, който браузърът използва за изчисляване на тежестта на CSS селектор. По-специфичен селектор има по-висок приоритет при прилагане на стиловете. Специфичността се изчислява въз основа на броя на ID, класове/псевдокласове/атрибути и елементи/псевдоелементи в селектора.

// a = брой ID
// b = брой класове, псевдокласове, атрибути
// c = брой елементи, псевдоелементи
// Inline стиловете имат най-висок приоритет (1, 0, 0, 0)
// Селекторът `*` има специфичност (0, 0, 0)

Пример за изчисляване на специфичността:

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

Ред на декларациите:

Ако две правила имат еднаква специфичност, се прилага това, което е обявено последно в CSS кода.

Наследяване:

Някои CSS свойства се наследяват от родителските елементи към децата (например, color, font-family). Ако за свойство не е зададена явно стойност на елемента, браузърът търси наследена стойност нагоре по дървото DOM.

По този начин, браузърът определя стиловете за елемент чрез съвпадение на селектори, решаване на конфликти с помощта на специфичност и реда на декларациите, както и вземане предвид на наследяването.