Приоритеты в CSS

Различают несколько типов стилей.

1. По-умолчанию. Описывается в стандарте HTML.
Для HTML 4 - http://www.w3.org/TR/CSS2/sample.html

2. ПользовательскийПользователь может подключить свой файл со стилями для html страницы. В разных браузерах это можно сделать по разному.

3. АвторскийСобственно то, что разработчики сайта подключили одним из 4х методом(ссылка).


Так как к станицы может быть подключено более одного типа стилей, появляется проблема, какие правила важнее.
В таких случаях работает следующие правила. Приоритет убывает сверху вниз:

1. Пользовательские стили с Important
2. Авторские стили с Important
3. Авторские стили
4. Пользовательские стили
5. Стили, принятые для Html элементов в спецификации CSS по умолчанию (когда ни автор, ни пользователь ничего другого не задали)

Ключевое слово important используется для повышения приоритета. Например,
p {color:red !important;}
Приоритеты в авторских стилях
В стилях могут быть описаны правила, в которых различные селекторы выбирают один и тот же элемент. В таких случаях опять возникает дилема, какое правило важнее. 

Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.

А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.

1. Универсальный селектор — количество начисляемых баллов равно нулю (0).
2. Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
3. Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
4. Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
5. Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.

Пример:
* { } /* 0 баллов */
em { } /* 1 балл */
p::first-letter { } /* 2 балла (один селектор тегов и один псевдоэлемент) */
p [title="Приветствие"] { }/* 11 баллов (по одному селектору тегов и атрибутов)*/
div.fine .one { } /* 21 балл (два класса и один селектор тегов) */
#header a:hover { } /* 111 баллов (идентификатор, селектор тегов и псевдокласс)*/  


Способы повышения приоритеты стилей:
1. Добавление !impotant к правилу.
Правило помеченное словом important всегда будет иметь больший приоритет по сравнению с другими.

2. Использование css свойств в атрибуте style для нужного html элемента.Но important все равно имеет больший приоритет.

Факторы влияющие на приоритет по убыванию:

1. Использование Css свойства в атрибуте style вместе с Important
2. Использование Important в Css свойстве из внешнего файла таблиц стилей или же из тега style в Html коде
3. Использование Css свойства в атрибуте style
4. Использование большего числа селекторов Id для данного Css свойства
5. Использование большего числа селекторов классов, псевдоклассов и атрибутов для данного Css свойства
6. Использование большего числа селекторов тегов и псевдоэлементов для данного Css свойства
7. Более низкое расположение Css свойства в коде, при прочих равных условиях

Приоритет подключаемых и импортируемых стилей
Браузер формирует из отдельных файл одну общую таблицу стилей.
Браузер считывает и применяет стили из файлов по порядку их появления в коде. 
Итоговая таблица стилей с учетом приоритетов:

1. Выбираются все стили подключенные к текущей странице с учетом типа устройства, на котором происходит просмотр.
2. Происходит сортировка свойств с учетом имеющихся правил !important и источников CSS (браузерные, авторские и пользовательские таблицы).
3. Делается еще одна сортировка, но уже по весу селекторов.
4. Последняя сортировка, где вычисляются те свойства, которые, находясь в селекторах с одинаковым весом и влияя на один и тот же элемент, имеют дубли. Из них выбираются те, которые располагаются ниже в CSS-коде.
5. Происходит отсеивание всех менее приоритетных дубликатов свойств и применение CSS к HTML-странице.

Источники:http://ktonanovenkogo.ru/html/uroki-css/prioritety-css-important-kombinacii-gruppirovka-selektorov-polzovatelskie-avtorskie-stili.html http://seodon.ru/css/prioritety-stilej.php