Разкажи ми за специфичността на CSS селекторите. Как се изчислява? Кой е най-специфичният селектор?

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

Как се изчислява специфичността

Обикновено специфичността се представя като четирицифрено число (a,b,c,d):

• a — ако стилът е зададен чрез inline-стил (например, style=""), тогава a=1, иначе 0
• b — броят на ID селекторите в селектора
• c — броят на класовете, псевдокласите и атрибутните селектори
• d — броят на таговете и псевдоелементите

Пример: селекторът #menu .item > a:hover

• ID селектор: #menu → b=1
• Клас .item и псевдоклас :hover → c=2
• Таг a → d=1
• Inline-стилове няма → a=0

Специфичност: (0,1,2,1)

Най-специфичният селектор

Най-специфичният е inline-стилът (a=1), който винаги има приоритет пред всички CSS селектори.

При сравнение на селектори без inline-стилове, селекторът с повече ID селектори ще има по-висок приоритет.

Обобщение

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