Я уже кратко рассказывал об этом здесь. Но, поскольку начинающим что-то может показаться сложным и непонятным в этом вопросе, решил написать отдельную статью. Надеюсь, если вы до сих пор не разобрались со специфичностью, то после этой статьи жить станет немного легче… Когда вы описываете внешний вид сайта с помощью стилей (CSS), браузеру нужно понять: а какое правило (какие стили) применить, если для одного и того же элемента подходит сразу несколько правил? Например, один стиль говорит «текст красный», другой — «текст синий»...

Если говорить по-простому, это такой хитрый механизм, с помощью которого браузер решает, какое именно правило применить к элементу, когда на него претендуют сразу несколько селекторов. Представьте себе иерархию в какой-нибудь серьезной конторе. Директор сказал одно, начальник отдела — другое, а коллега нашептал третье. Кого вы послушаете? Вот и браузер постоянно занимается таким взвешиванием авторитетов. Тут не нужно быть математиком от бога, но прикинуть в уме придется. У каждого типа селектора есть своя «убойная сила». Весь этот винегрет обычно представляют в виде четырех чисел, разделенных запятыми...