Почему 1 id перекрывает 11 классов?

bla bla

Ответ

CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.
Вес селекторов:
style="" — 1,0,0,0 #id — 0,1,0,0 .class — 0,0,1,0 [attr=value] — 0,0,1,0 LI — 0,0,0,1 * — 0,0,0,0
Примеры:
LI — 0,0,0,1 — селектор по тегу UL LI — 0,0,0,2 — селектор c двумя тегами весит больше, чем с одним. .orange — 0,0,1,0 — селектор с классом весит больше, чем селектор с тегом. .orange A SPAN — 0,0,1,2 — селектор перевесит предыдущий, потому что помимо класса содержит два тега. #page .orange — 0,1,1,0 — селектор с ID перевесит всё, кроме inline-стилей.
Есть еще !important, которым можно перебить даже inline стиль. Но обычно это нужно в крайних случаях. Если н используется часто, значит что-то сделано не так.

В целом, если у вас будет даже 156 классов подряд, то вес будет
0 0 156 0
что все равно никогда не побьет айдишник

P.S. Если интересно, можете поэкспериментировать с онлайн калькулятором весов селекторов