Когда вы применяете два или более правил CSS к одному и тому же тексту, правила могут конфликтовать и давать неожиданные результаты. Браузер применяет правила CSS следующим образом:
если к одному и тому же тексту применяются два правила, браузер отображает все свойства обоих правил, если только определенные свойства не конфликтуют. Например, одно правило может указывать, что цвет текста должен быть синим, а другое правило может указывать, что цвет текста должен быть красным.
Если свойства двух правил, применимых к одному и тому же тексту, конфликтуют, браузер отображает свойства самого внутреннего правила (правила, ближайшего к самому тексту). Таким образом, если на текстовый элемент влияет как внешняя таблица стилей, так и встроенный стиль, применяется встроенный стиль.
Свойства в пользовательских правилах CSS (правила, применяемые с помощью атрибута class) переопределяют свойства в стилях тегов HTML в случае прямого конфликта.
В следующем примере стиль, определенный для h1, определяет шрифт, размер и цвет всех абзацев h1, но пользовательское правило CSS .Blue, примененное к этому абзацу, переопределит настройки цвета в стиле h1. Другое пользовательское правило CSS, .Red, переопределяет .Blue, поскольку оно находится внутри стиля .Blue.
<h1><span class="Blue">Этот абзац управляется пользовательским стилем .Blue и h1.
Стиль HTML-тега.<span class="Red">За исключением того, что это предложение управляется стилем .Red.</span>
Теперь мы вернулись к стилю .Blue.</span></h1>