Esta resposta é para iniciantes absolutos. Se você quiser uma visão geral dessa resposta, leia minha segunda resposta.
Cascateamento é o processo de combinar diferentes folhas de estilo e resolver conflitos entre diferentes regras CSS e declarações quando mais de uma regra se aplica a um determinado elemento . Porque como você provavelmente já sabe, uma declaração para uma determinada propriedade de estilo, como o tamanho da fonte, pode aparecer em várias folhas de estilo e também várias vezes dentro de uma única folha de estilo.
Para entender o cascateamento, você deve começar com a fase de análise CSS, porque na fase de análise a primeira etapa é resolver as declarações CSS conflitantes e a segunda etapa é processar os valores CSS finais.
Agora, o CSS também pode vir de diferentes fontes. O mais comum é o CSS que nós, desenvolvedores, escrevemos. Essas declarações que colocamos em nossas folhas de estilo são chamadas de declarações do autor. Outra fonte pode ser as declarações do usuário, que é o CSS vindo do usuário. Por exemplo, quando o usuário altera o tamanho da fonte padrão no navegador, esse é o CSS do usuário e, por último, mas não menos importante, existem as declarações do navegador padrão.
Por exemplo, se colocarmos uma tag âncora em nosso HTML para um link e depois não estilizá-lo, geralmente será renderizado com texto em azul e sublinhado, certo. Isso é chamado de agente de usuário CSS porque é definido pelo navegador. Portanto, a cascata combina as declarações CSS provenientes de todas essas fontes diferentes, mas como a cascata realmente resolve os conflitos quando mais de uma regra se aplica?
Bem, o que ele faz é examinar a importância, a especificidade do seletor e a ordem de origem da ordem de declarações conflitantes para determinar qual delas tem precedência, e é assim que funciona. Em primeiro lugar, a cascata começa fornecendo as declarações conflitantes de importância diferente com base em onde são declaradas em sua fonte. As declarações mais importantes são as declarações do usuário marcadas com a palavra-chave importante.
As segundas declarações mais importantes são as declarações do autor marcadas com importante. Terceiro, as declarações normais do autor, depois as declarações normais do usuário e, finalmente, as menos importantes são as declarações do navegador padrão, o que realmente faz muito sentido, pois podemos facilmente sobrescrever essas declarações que vêm do navegador por padrão.
Agora, muitas vezes, teremos um monte de regras conflitantes em nossas folhas de estilo do autor sem nenhuma palavra-chave importante. Esse é realmente o cenário mais comum e, neste caso, todas as declarações têm exatamente a mesma importância. Agora, o que acontece neste caso? O que a cascata faz se for esse o caso é calcular e comparar as especificidades dos seletores de declaração, e é assim que funciona.
Estilos embutidos têm a especificidade mais alta seguida por IDs, classes, pseudo-classes e seletores de atributo e, finalmente, o elemento menos específico e seletor de pseudo-elemento. Então, quando temos declarações conflitantes com a mesma importância que vimos no último slide, calculamos a especificidade do seletor com base nas prioridades que acabei de mostrar, mas vamos ver como realmente calculamos as especificidades com um pequeno exemplo, isso é sempre melhor, certo.
Pelo exemplo acima, todas essas declarações têm a mesma importância, pois são todas declarações do autor. Portanto, vamos calcular suas especificidades de seletor para descobrir se a cor de fundo será azul, verde, roxo ou amarelo, e é assim que fazemos. Na verdade, a especificidade não é apenas um número, mas um número para cada uma das quatro categorias que mostrei antes. Estilos, IDs, classes, pseudoelementos e atributos embutidos e, finalmente, elementos e, para cada um deles, contamos o número de ocorrências no seletor.
Portanto, aqui no seletor um, não temos nenhum estilo embutido, é claro, porque um estilo embutido deve ser escrito no HTML, o que não é o caso aqui, então é zero. Também não temos IDs aqui, então é novamente zero, mas temos uma classe, a classe de botão. Então, para a categoria classes, temos um e, finalmente, não há seletor de elemento aqui, então zero para aquele também, e é isso. A especificidade do seletor é zero, zero, um, zero.
Agora, vamos comparar com os outros. O próximo também não é um estilo embutido, portanto, zero para o primeiro. Agora aqui temos um seletor de ID para o nav ID, certo, então é um para o ID. Também temos duas classes puxadas para a direita e o botão, então é um dois para a categoria de classes e, finalmente, há também dois seletores de elemento aqui. O elemento nav e o elemento div, o que significa que também são dois para a categoria de elementos. Finalmente, a especificidade do seletor é zero, um, dois, dois, que na verdade é um seletor altamente específico.
O seletor número três é muito simples. É apenas um seletor de elemento e, portanto, a especificidade é zero, zero, zero, um.
Agora o último, seletor número quatro. Primeiro, novamente temos o nav ID, então é um para o ID. Em seguida, temos uma classe, a classe de botão, e também uma pseudoclasse, que é hover, o que a torna duas para a categoria de classes no total. Como também há um seletor de elemento, a especificidade final é zero, um, dois, um.
Agora vamos saber como realmente usamos esses números para descobrir qual dos seletores se aplica. Começamos a olhar para os números da esquerda para a direita, começando com a categoria mais específica, os estilos embutidos. Se houver um seletor com um para estilos embutidos, ganha contra todos os outros seletores, porque esta é a categoria mais específica. Bem, este não é o caso aqui, então vamos passar para os IDs. Vemos que os seletores dois e quatro têm um aqui, enquanto os outros têm zero, então aqueles com zero estão fora do jogo porque são menos específicos que os seletores dois e quatro aqueles com os IDs.
Agora, uma vez que ambos os seletores têm um na categoria de IDs, temos que seguir em frente e verificar as classes. Ambos têm um dois nesta categoria ainda há empate entre eles, e finalmente, na categoria de elementos, o seletor dois tem um dois enquanto o seletor quatro tem apenas um e então temos um vencedor aqui. O seletor número dois é o seletor mais específico de todos e, portanto, dará ao nosso botão um fundo verde.34 O valor da declaração vencedora é chamado de valor em cascata porque é o resultado da cascata.
Portanto, começamos com um monte de valores declarados, neste caso azul, verde, roxo e amarelo, um deles vence e se torna o valor em cascata, que em nosso exemplo é verde.
Agora imagine que o setor quatro também tenha dois elementos, então ambos os seletores dois e quatro teriam exatamente a mesma especificidade, certo. Então o que acontece neste caso e eu prometo a você que está quase acabando agora, tudo bem. Bem, se ainda houver um empate neste ponto, a última declaração CSS escrita no código é a que se aplica. Então, novamente, se tudo for igual, se todos os seletores de declaração tiverem a mesma especificidade, então é simplesmente a última declaração que será usada para estilizar o elemento selecionado.