Почему правило ниже в CSS не меняет цвет ссылки?

Порядок записи решает только при равной специфичности, то есть весе селекторов. Браузер сравнивает три числа: количество идентификаторов; классов, атрибутов и псевдоклассов; тегов и псевдоэлементов. Сравнивает слева направо, без сложения: первое различие определяет победителя.

Возьмите ссылку внутри блока с классом widget, вложенного в блок с id="sidebar". Задайте правила:
#sidebar .widget a { color: navy; }
.widget a { color: teal; }
Ссылка будет тёмно-синей: (1, 1, 1) сильнее (0, 1, 1). Уберите #sidebar: веса сравняются, и второе правило сделает ссылку бирюзовой.

Этот пример сравнения селекторов проверяйте без !important и слоёв каскада: слои группируют правила и задают приоритет раньше сравнения весов.

#основы #практика