Какой вид стилей CSS имеет наивысшей приоритет? встроенные (inline-) стили импортированные стили связанные стили
Когда стиль задан непосредcтвенно в HTML-теге в атрибуте style и при этом к значению стиля добавлено !important: использование !important в атрибуте style перекрывает !important в CSS-файле или теге <style>.
Подробности: http://htmlbook.ru/samcss/kaskadirovanie
Те, которые внутри атрибута style непосредственно в HTML-коде. Обойти приоритет можно только с помощью уникального свойства !important, которое моментально сделает любое свойство приоритетным.
color: black !important; Помимо !important (точнее при его отсутствии) переписать стили может метод style из JavaScript. Если скрипт грузится после всего остального кода, он стоит вторым в приоритетах, потому что переписывает оригинальные правила.
document.querySelector('selector').style.color = 'black'; Если в CSS указан !important, то свойство из JS будет проигнорировано. Но только при условии, что в самом JS не используется идентичный подход.
document.querySelector('selector').style.color = 'black !important'; При условии загрузки скрипта в конце документа, именно это свойство имеет самый высокий приоритет, который никак и никакое другое правило уже не перепишет. Однако нельзя еще забывать про медиазапросы, которые из-за !important могут сломать стили страницы (вернее, не сработать).
Самый высокий приоритет у свойств, в конце объявления которых указано !important
Универсальный селектор — количество начисляемых баллов равно нулю (0).
Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.