Каскадирование и специфичность CSS

Наверно у многих, кто занимается (занимался) версткой и в плотную сталкивался с таблицами стилей, наступали моменты когда !important на !important'e сидел, css превращался в вереницу длинных цепочек, но все равно кто-то, где-то, кого-то перебивал (или наоборот). И не совсем ясно, почему так происходит.

Давайте раз и навсегда разберемся с каскадированием стилей и специфичностью селекторов.

Специфичность селекторов определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.
Подсчитать приоритет селектора очень просто.

• 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 классов не имеют большего приоритета над идентификатором читать здесь