В CSS при одновременном применении нескольких селекторов возникает вопрос: какой стиль будет применен? Это определяется приоритетом селектора или специфичностью.
Основные правила приоритета
- Inline-стили (
style="...") имеют самый высокий приоритет. - ID селектор (
#id) сильнее, чем класс (.class), тег (div) или атрибут ([type="text"]). - Классы, атрибуты и псевдоклассы имеют средний приоритет.
- Теги и псевдоэлементы имеют наименьший приоритет.
- Если специфичность равна, применяется последний объявленный стиль в CSS.
Пример
<div id="box" class="red">Привет</div>
В этом примере текст будет синим, так как ID селектор имеет более высокий приоритет, чем класс или тег.
Советы
- Используйте ID только там, где нужен уникальный элемент.
- Для общей стилизации предпочтительнее использовать классы.
- Старайтесь избегать !important, чтобы не нарушать естественный приоритет CSS.