Наверно у многих, кто занимается (занимался) версткой и в плотную сталкивался с таблицами стилей, наступали моменты когда !important на !important’e сидел, css превращался в вереницу длинных цепочек, но все равно кто-то, где-то, кого-то перебивал (или наоборот). И не совсем ясно, почему так происходит.
Давайте раз и навсегда разберемся с каскадированием стилей и специфичностью селекторов.
Специфичность селекторов определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.
Подсчитать приоритет селектора очень просто.
- inline-стили имеют специфичность 1000
- за каждый идентификатор (#) 0100
- за каждый класс (.) и псевдо-класс (::, []) 0010
- за каждый тег и псевдо-элемент 0001
* {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-стилях.
ссылка на оригинал статьи https://habrahabr.ru/post/278477/
Добавить комментарий