Quando você aplica duas ou mais regras CSS ao mesmo texto, as regras podem entrar em conflito e produzir resultados inesperados. O navegador aplica regras CSS da seguinte maneira:
Se duas regras forem aplicadas ao mesmo texto, o navegador exibirá todas as propriedades de ambas as regras, a menos que propriedades específicas entrem em conflito. Por exemplo, uma regra pode especificar que a cor do texto seja azul, enquanto outra regra pode especificar que a cor do texto seja vermelha.
Se as propriedades de duas regras que se aplicam ao mesmo texto entrarem em conflito, o navegador exibirá as propriedades da regra mais interna (a regra mais próxima do próprio texto). Portanto, se uma folha de estilos externa e um estilo embutido afetarem um elemento de texto, o estilo embutido será aplicado.
As propriedades nas regras CSS personalizadas (regras aplicadas usando o atributo class) substituirão as propriedades nos estilos de tags HTML se houver um conflito direto.
No exemplo a seguir, o estilo definido para h1 especifica a fonte, o tamanho e a cor de todos os parágrafos h1, mas a regra CSS personalizada .Blue aplicada a esse parágrafo substituirá as configurações de cores no estilo h1. Outra regra CSS personalizada, .Red, substituirá .Blue porque está dentro do estilo .Blue.
<h1><span class="Blue">Este parágrafo é controlado pelo estilo personalizado .Blue e h1
Estilo de tag HTML.<span class="Red">Exceto que esta frase é controlada pelo estilo .Red.</span>
Agora voltamos ao estilo .Blue.</span></h1>