Какой вид стилей 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) баллов.