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

#html #css

    
        
    
    
        
bla bla
    




    

Ответы

Ответ 1

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. Если интересно, можете поэкспериментировать с онлайн калькулятором весов селекторов


Ответ 2

В CSS, наиболее приоритетным селектором является id и он всегда перекрывает стили
для классов или для тегов