Какой самый высокий приоритет селектора?

Наивысший приоритет в CSS: селектор !important

Строго говоря, вопрос о "самом высоком приоритете селектора" требует уточнения, потому что в CSS есть две тесно связанные, но разные концепции: специфичность селектора (specificity) и директива !important. Если говорить о том, что гарантированно переопределит любое другое правило, то это декларация (свойство и значение), помеченная директивой !important.

Однако, !important — это не селектор, а модификатор, применяемый к конкретному свойству внутри объявления. Поэтому важно понимать иерархию полностью.

Иерархия приоритетов (от низшего к высшему)

1. Правила автора в таблице стилей (без !important). Здесь работает расчет специфичности селектора.
2. Правила автора с !important.
3. Правила пользователя (браузерные настройки доступности) с !important.
4. Правила пользовательского агента (стили браузера по умолчанию) с !important (на практике крайне редки).

Таким образом, декларация !important в CSS-файле разработчика имеет наивысший практический приоритет и перекрывает все остальные конфликтующие объявления, независимо от специфичности их селекторов.

Специфичность селекторов (когда !important не используется)

Если !important не применяется, победит правило с большей специфичностью. Она рассчитывается по весу в четырех категориях (от самых весомых к менее весомым):

1. Встроенные стили (inline styles): Стиль, заданный напрямую в атрибуте style элемента. Имеет специфичность 1,0,0,0.
2. ID селекторы: Например, #header. Каждый ID добавляет 0,1,0,0.
3. Классы, псевдоклассы, атрибут-селекторы:

    *   Классы: `.my-class`
    *   Псевдоклассы: `:hover`, `:nth-child()`
    *   Атрибут1-селекторы: `[type="text"]`
    *   Каждый такой селектор добавляет `0,0,1,0`.

1. Элементы и псевдоэлементы:

    *   Теги: `div`, `p`
    *   Псевдоэлементы: `::before`, `::after`
    *   Каждый добавляет `0,0,0,1`.

Универсальный селектор (*), комбинаторы (>, +, ~) и :where() не увеличивают специфичность.

Пример расчета специфичности

/* Специфичность: 0,0,0,1 */
p {
  color: black;
}

/* Специфичность: 0,0,1,0 */
.my-text {
  color: blue;
}

/* Специфичность: 0,0,1,1 */
div p.my-text {
  color: green;
}

/* Специфичность: 0,1,0,0 */
#main-title {
  color: red;
}

/* Специфичность: 0,1,1,3 (ID + класс + 3 тега) */
header#main nav ul li.active {
  color: purple;
}

/* ВНЕ КОНКУРЕНЦИИ - перебивает ВСЕ вышеперечисленное */
p {
  color: orange !important; /* Директива !important */
}

Практические выводы и рекомендации

• !important — это "атомная опция". Её следует использовать крайне осмотрительно, только в критических случаях (например, переопределение стилей из сторонней библиотеки, которые вы не можете иначе изменить, или для служебных CSS-классов, которые должны всегда побеждать). Злоупотребление !important приводит к "войне важностей", когда для переопределения стиля приходится создавать новое правило с ещё одним !important, что делает код не поддерживаемым.
• Принцип каскада (Cascade). Если специфичность одинакова, побеждает правило, которое было объявлено последним в CSS (ниже в коде).
• Порядок источников. Важен порядок загрузки таблиц стилей: <link> или @import позже в HTML — имеют приоритет при равной специфичности.
• Инлайновые стили (в атрибуте style). В рамках правил автора без !important они имеют самый высокий приоритет благодаря специфичности 1,0,0,0. Но их !important все равно перебивает.

Итог: На вопрос "что сильнее всего?" для практикующего фронтенд.разработчика можно ответить так: декларация с директивой !important в вашей таблице стилей обладает абсолютным приоритетом. Но в хорошо организованном CSS проектирование селекторов должно строиться на осознанном использовании специфичности и каскада, а !important оставаться исключительным инструментом.