Não estou conseguindo mudar a cor da âncora com a classe 'navbar-brand' do bootstrap. Como faço para saber o tipo de especificidade de seletor que o bootstrape está utilizando? Ou pelo menos uma forma melhor de sobrescrever a cor que essa classe aplica no elemento sem utilizar o !important.
Oi, Nícolas, tudo bem?
Desculpe a demora em te responder!
Para saber qual é o seletor que o Bootstrap está utilizando, é possível inspecionar o elemento com as ferramentas de desenvolvedor do navegador clicando com o botão direito do mouse em Inspecionar ou utilizando o atalho "CTRL + SHIFT + I", em seguida certifique-se de ver se a aba "Elements" está aberta e clique do meio em "Styles". Nessa seção é possível ver todas as regras de estilo que estão sendo aplicadas ao elemento, e qual seletor está sendo utilizado para cada uma delas.
No caso do seletor que você indicou ele é uma classe de CSS e para superar a importância de uma classe podemos criar uma "id", que apresenta maior especificidade. Porém, é importante lembrar que o uso excessivo de "IDs" no código pode torná-lo menos flexível e difícil de dar manutenção.
Por exemplo, no código abaixo para fazer com que as informações adicionadas a classe "navbar-brand" sejam sobrepostas, criamos a id "my-brand" e adicionamos a cor vermelha, como mostro no código abaixo:
<nav class="navbar">
<a class="navbar-brand" id="my-brand" href="#">Minha marca</a>
...
</nav>#my-brand {
color: red;
}Portanto, o resultado do código acima será um texto escrito em vermelho.
Espero ter ajudado e caso tenha dúvidas, estarei à disposição.
Abraços e bons estudos!