Мы часто оказываемся в ситуациях, когда мы хотим переписать стиль, к которому у нас нет доступа, трудно найти или мы хотим переписать с помощью CSS стиль, который был написан в коде HTML или был установлен с помощью Javascrpt.
В этой статье мы собираемся обсудить силу различных стилевых объявлений и как мы можем их перезаписать.
Допустим, что у нас есть предложение ниже:
Код
<p>Здесь идет <span id="highlighted">Ключевое слово</span>.</p>
Чтобы выделить тег span, мы обычно используем стили CSS:
Например:
Код
#highlighted {
color: red;
}
Мы можем перезаписать это, если мы определим другой цвет после этой строки в таблице стилей, потому что всегда применяются более низкие правила.
В этом случае текст будет синим:
Код
#highlighted {
color: red;
}
#highlighted {
color: blue;
}
Мы можем более точно нацелить диапазон, чтобы установить его цвет. В обоих случаях ниже цвет выделенного текста будет зеленым.
Код
span#highlighted {
color: green;
}
#highlighted {
color: red;
}
p #highlighted {
color: green;
}
#highlighted {
color: red;
}
Используйте знак !Important, чтобы переопределить свойство независимо от его положения в документе. «Важная» декларация всегда сильнее, чем без нее. Рекомендуется использовать их, только если это действительно необходимо.
В нашем примере ниже текст будет красным.
Код
p #highlighted {
color: green;
}
#highlighted {
color: red !important;
}
Встроенные стили HTML сильнее, чем CSS, поэтому в этом случае текст будет серым, но мы можем перезаписать это с помощью важного правила из таблицы стилей.
Код
p #highlighted {
color: green;
}
HTML
Код
<p>Здесь идет <span id="highlighted" style="color: grey;">Ключевое слово</span>.</p>
В некоторых случаях стиль сбрасывается с помощью JavaScript / jQuery, и мы не можем перезаписать его таблицами стилей. В этом случае мы можем использовать самое сильное объявление CSS, которое перезаписывает все:
Код
#highlighted[style] {
color: yellow !important;
}
