CSS-селекторы — это паттерны, которые позволяют выбирать элементы HTML для применения к ним стилей. Они бывают разных типов: по тегу (например, div), по классу (.class), по идентификатору (#id), по атрибутам ([type="text"]), псевдоклассы (:hover) и псевдоэлементы (::before).

Специфичность — это механизм, который определяет, какой стиль будет применён, если к одному элементу подходят несколько селекторов с конфликтующими правилами. Специфичность считается по формуле, учитывающей количество ID, классов, тегов и встроенных стилей:

Встроенный стиль (inline style) — самая высокая специфичность.
Количество ID в селекторе.
Количество классов, атрибутов и псевдоклассов.
Количество тегов и псевдоэлементов.

Например, селектор #header .nav li имеет более высокую специфичность, чем просто .nav li.

Пример:

#header .nav li {
  color: red; /* специфичность выше */
}
.nav li {
  color: blue;
}

В этом случае цвет будет красным, так как селектор с ID имеет большую специфичность.

Что знаешь про CSS-селекторы и специфичность?