1.8 KiB
title | localeTitle |
---|---|
Override Styles in Subsequent CSS | Substituir estilos no CSS subseqüente |
Substituir estilos no CSS subseqüente
O bit mais importante a ser lembrado quando se deseja substituir estilos em CSS subseqüente é a ordem em que as classes são criadas.
O último estilo atualizado terá precedência sobre as classes anteriormente escritas.
Por exemplo:
<style>
body {
color: purple;
}
.red-text {
color: red;
}
.blue-text {
color: blue;
{
</style>
Agora, quando você cria qualquer texto no body
, ele terá a cor do texto purple
atribuída a ele.
Para começar a experimentar o processo de substituição, agora você pode adicionar a classe "red-text"
para ver os resultados.
Usando o formato acima, o texto abaixo substituirá a purple
fonte anteriormente purple
por red
.
<h1 class="red-text">Example</h1>
Quando você quiser adicionar várias classes, você pode usar este formato:
<h1 class="class-name1 class-name2 class-name3">Example</h1>
Agora você pode adicionar a última classe criada acima ( "blue-text"
) ao mesmo exemplo acima para ver os resultados.
<h1 class="red-text blue-text">Example</h1>
Isso selecionará automaticamente a última classe criada na sua seção de estilos, que nesse caso era "blue-text"
.
Mesmo se você aplicar o red-text
da primeira classe atrás do blue-text
da segunda classe, o processo de substituição escolherá a última classe criada. Nesse caso, essa classe é o blue-text
.
Então, por exemplo:
<h1 class="blue-text red-text">Example</h1>
Isso ainda exibirá uma blue
fonte blue
devido à ordem na seção de estilos.
A classe de blue-text
foi criada por último, na parte de baixo ( </style>
).