Наверно у многих, кто занимается (занимался) версткой и в плотную сталкивался с таблицами стилей, наступали моменты когда !important на !important'e сидел, css превращался в вереницу длинных цепочек, но все равно кто-то, где-то, кого-то перебивал (или наоборот). И не совсем ясно, почему так происходит.
Давайте раз и навсегда разберемся с каскадированием стилей и специфичностью селекторов.
Специфичность селекторов определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.
Подсчитать приоритет селектора очень просто.
При добавлении !important приоритет становится главенствующим. Если !important несколькостоит задуматься о смене профессии они начинают подчиняться тем же правилам.
После всех манипуляций специфичность совпала — выигрывает последнее (то что ниже) правило.
Ну и конечно же CSS-анимации, имеющие приоритет выше, даже чем !important в inline-стилях.
UPD Почему 11 классов не имеют большего приоритета над идентификатором читать здесь
Давайте раз и навсегда разберемся с каскадированием стилей и специфичностью селекторов.
Специфичность селекторов определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.
Подсчитать приоритет селектора очень просто.
- inline-стили имеют специфичность 1000
- за каждый идентификатор (#) 0100
- за каждый класс (.) и псевдо-класс (::, []) 0010
- за каждый тег и псевдо-элемент 0001
- * и стили браузера 0000
* {box-sizing: border-box} /* специфичность 0000 */
li {color:red} /* специфичность 0001*/
ul li {color:red} /* специфичность 0002*/
.list li {color:red} /* специфичность 0011*/
#list li {color:red} /* специфичность 0101*/
a[href^="http://"] {text-decoration: underline} /* специфичность 0011 */
При добавлении !important приоритет становится главенствующим. Если !important несколько
li {color:red !imporatnt} /* специфичность 0001 - win*/
ul li {color:red} /* специфичность 0002*/
li {color:red !imporatnt} /* специфичность 0001*/
ul li {color:red !imporatnt} /* специфичность 0002 - win*/
После всех манипуляций специфичность совпала — выигрывает последнее (то что ниже) правило.
Ну и конечно же CSS-анимации, имеющие приоритет выше, даже чем !important в inline-стилях.
UPD Почему 11 классов не имеют большего приоритета над идентификатором читать здесь
Комментарии (14)
gatilin222
04.03.2016 09:38А еще можно писать дублирование одного и того же класса .some_class.some_class {}. Но лучше не стоит)
artemmalko
04.03.2016 10:08Вот еще интересная статья на эту тему. https://css-tricks.com/a-specificity-battle/
gwer
Из вашего представления можно сделать вывод, что 11 классов в селекторе специфичнее одного идентификатора.
Ну и да, с этим уже раз и навсегда разбирались огромное количество раз, даже на хабре.
artemmalko
Надо просто пробел между разрядами написать и все становится на свои места. Хотя это уже не разряды будут даже, но понятнее точно станет.