Когда CSS каскадирование не работает

Question

У меня есть #nav a {color:1} селектор и несколько строк ниже, другой селектор a.current {color:2}, который указывает больше свойств на текущий элемент (панель навигации и выбранный элемент/страница). Таким образом, цвет от второго селектора не работает, цвет 1 остается на элементе.

Если я положил #nav a.current {color:2}, то он работает. Почему так? Кажется, что селектор с указанным разделом id = "nav" имеет своего рода приоритет.

Answer 1

Как упоминается в одном из комментариев, специфика заключается в том, что происходит здесь. Начиная с the official definition, селектор #nav a имеет специфичность 101 (при условии, что основание 10), а a.current имеет спецификацию 10. Первая имеет высокую специфичность, поэтому имеет приоритет.

#nav a.current имеет специфичность 111

Вот official specification of the cascade для справки.