O que é Especificidade?

Especificidade é como o browser escolhe entre estilos conflitantes qual aplicar a esse elemento.
Para isto o browser segue regras ditadas pela Hierarquia do DOM e neste documento estaremos estudando isso.

Como sabemos o estilo pode ser aplicado pela CSS no browser em 3 níveis:
1-Genéricamente : Em todas as tags.
2-Especificamente : Nas tags que queremos ( com as classes ).
3-Unicamente : Pelo id do elemento.

Também sabemos que um parâmetro de uma tag pai/container pode definir a característica de uma tag filha mas quando exatamente essa 'herança' é passada?

Definido os estilos das tags

Regra um

Se ambos os estilos são de natureza absolutamente idênticas, neste caso ambos definem estilos de tags, será sempre aplicado o último estilo.

Exemplo1 : No exemplo abaixo definimos um span com uma mensagem e na css desta página definimos dois estilos, o primeiro com a cor de fundo azul claro e o segundo com a cor de fundo verde claro para a mesma tag span. Qual prevalece?

Como foi especificado:
        <span>Conflito a nível de tag</span><br />

Como o browser exibe:
Conflito a nível de tag

Como podemos ver, o último estilo prevalesceu, fundo verde.

Regra dois

Se uma regra for mais específica que outra ela prevalecerá.

Exemplo2 : No exemplo abaixo definimos dois spans com mensagem e na css desta página definimos nos estilos a cor de fundo azul claro para a span e a cor de fundo amarela para o span.classe. Qual prevalece?

Como foi definida:
        <span>Cor de fundo SEM classe</span>
           
        <span class="classex">Cor de fundo COM classe</span><br />

Como o browser exibe:
Cor de fundo SEM classe     Cor de fundo COM classe

Como podemos ver, a mais específica (div.class) prevalece.

Exemplo3 : No exemplo abaixo definimos um span com uma mensagem e na css desta página definimos nos estilos a cor de fundo azul claro e para a span e a cor de fundo amarela para o span.classe. Contudo acrescentei um terceiro span com um id e para esta span com id defini o fundo pink. Qual prevalece

Como foi definida:
        <span>Cor de fundo SEM classe</span>
           
        <span class="classex">Cor de fundo COM classe</span>
           
        <span id="idx">Cor de fundo COM ID</span><br />

Como o browser exibe:
Cor de fundo SEM classe     Cor de fundo COM classe     Cor de fundo COM ID

Como podemos ver, a mais específica (div#id) prevalece.

Regra três

Se dentro da css for definida uma classe com !important ela sempre prevalecerá.
No exemplo abaixo colocamos uma cor de fundo para o id e outra para a classe mas na classe colocamos !important.

Como foi definida:
        <span>Cor de fundo SEM classe</span>
        <span class="classex">Cor de fundo COM classe</span>
        <span id="idx">Cor de fundo COM ID</span>
        <span id="idy" class="classey">Cor de fundo COM Classe e !Important</span>

Como o browser exibe:
Cor de fundo SEM classe     Cor de fundo COM classe     Cor de fundo COM ID     Cor de fundo COM Classe e !Important

Como podemos ver, o important prevalece.

---

Resumo sobre a aplicação de estilos pela CSS

A sequencia abaixo esta da menor para a maior prioridade:
1-Tag
2-Classe
3-ID
4-!important

---

Estilos utilizados nesta página:
    <style>
        .centra {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

        <!-- teste de especificidade a nivel de tag -->
        span{
            background-color:lightblue;
        }

        span{
            background-color:lightgreen;
        }

        span.classex{
            background-color:yellow;
        }

        span#idx{
            background-color:pink;
        }

        span#idy{
            background-color:aqua;
        }

        span.classey{
            background-color:chartreuse !important;
        }

    </style>