Pull to refresh

Специфичность селекторов CSS

Хотелось бы расставить некоторые точки над i на тему специфичности селекторов в CSS.

Наверное, многие знают, что приоритет значений свойств в селекторе определяется его специфичностью. Можно выделить 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.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.