Хотелось бы расставить некоторые точки над i на тему специфичности селекторов в CSS.
Наверное, многие знают, что приоритет значений свойств в селекторе определяется его специфичностью. Можно выделить 4 уровня:
— тег имеет специфичность 0001
— класс, а также псевдокласс и псевдоэлемент имеют специфичность 0010
— id имеет специфичностью 0100
— инлайновый стиль имеет приоритет 1000
Сразу возникает вопрос: десять классов в селекторе заменяют один id? В теории нет, но на практике, как было правильно указано в другом посте, в браузерах Firefox и Chrome его заменяет 256 классов, а в Opera 65536.
Ещё одну «пачку» уровней специфичности добавляет ключевое слово !important. В частности (в теории), получается, что инлайновый стиль с !important средствами CSS перебить невозможно. На самом деле, возможно.
Например, у вас есть такая разметка:
Как изменить цвет текста средствами CSS? Его просто нужно анимировать:
Анимировать можно все цвета, все числовые значения. Приоритет анимированных значений свойств будет выше любых других. Приоритет между анимациями (если их несколько) определяется обычным образом, как описано выше.
Но есть одно исключение: системные CSS в браузерах Firefox и Opera, в которых присутствует !important, никакими методами перебить нельзя. Например, многим известен системный хардкод:
Причём, в указанном примере, normal разный в Firefox и Opera.
Наверное, многие знают, что приоритет значений свойств в селекторе определяется его специфичностью. Можно выделить 4 уровня:
— тег имеет специфичность 0001
— класс, а также псевдокласс и псевдоэлемент имеют специфичность 0010
— id имеет специфичностью 0100
— инлайновый стиль имеет приоритет 1000
Сразу возникает вопрос: десять классов в селекторе заменяют один id? В теории нет, но на практике, как было правильно указано в другом посте, в браузерах Firefox и Chrome его заменяет 256 классов, а в Opera 65536.
Ещё одну «пачку» уровней специфичности добавляет ключевое слово !important. В частности (в теории), получается, что инлайновый стиль с !important средствами CSS перебить невозможно. На самом деле, возможно.
Например, у вас есть такая разметка:
<span class="some__class" style="color: green !important;">зелёный текст</span>
Как изменить цвет текста средствами CSS? Его просто нужно анимировать:
@-webkit-keyframes more_important {0%{color: red;} 100%{color: red;}}
@-moz-keyframes more_important {0%{color: red;} 100%{color: red;}}
@-o-keyframes more_important {0%{color: red;} 100%{color: red;}}
@keyframes more_important {0%{color: red;} 100%{color: red;}}
.some__class
{
-webkit-animation: more_important 1s infinite;
-moz-animation: more_important 1s infinite;
-o-animation: more_important 1s infinite;
animation: more_important 1s infinite;
}
Анимировать можно все цвета, все числовые значения. Приоритет анимированных значений свойств будет выше любых других. Приоритет между анимациями (если их несколько) определяется обычным образом, как описано выше.
Но есть одно исключение: системные CSS в браузерах Firefox и Opera, в которых присутствует !important, никакими методами перебить нельзя. Например, многим известен системный хардкод:
input
{
line-height: normal !important;
}
Причём, в указанном примере, normal разный в Firefox и Opera.