Конфликты стилей

Когда вы применяете более одного CSS-стиля к тексту, они могут конфликтовать и приводить к неожиданным результатам. Браузеры применяют атрибуты стиля согласно следующим правилам.

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

В приведенном ниже примере стиль, определенный для тега <H1>, мог бы определить шрифт, размер и цвет для всех абзацев, но примененный к этому абзацу CSS-стиль .Blue блокирует настройку цвета в стиле тега <H1>. Второй CSS-стиль .Red блокирует стиль .Blue, т. к. находится внутри .Blue-стиля.

<H1><SPAN class="Blue">К этому абзацу применен созданный пользователем стиль .Blue и стиль HTML H1.<SPAN class="Red">За исключением этого предложения, к которому применен стиль .Red.</SPAN>А теперь возвращаемся к стилю .Blue </SPAN></H1>