1
resposta

Diferença de CSS entre "nav li" e "nav a"

Fazendo as atividades do vídeo 2.4, quando o professor está fazendo ajustando a fonte dos itens de navegação, aos 5'10'' o professor declarou a propriedade "text-transform: uppercase" dentro da tag "nav a"... entretanto eu entendi que estes também poderiam ser declarados nos itens de lista "nav li".

Funcionou corretamente e os textos ficaram maiúsculos.

Logo em seguida, o professor colocou a fonte na cor preta, declarando "color: #000000" novamente dentro de "nav a". Entretanto, para esse atributo, a declaração dentro de "nav li" não funcionou corretamente e o texto continuou em preto.

Por quê ocorreu essa diferença, sendo que todos os links "a" da navegação "nav" também são itens de lista "li"? Porque funciona corretamente para o Text-Transform, mas não para Color?

Código do professor:

nav li {
    display: inline;
}

nav a {
    text-transform: uppercase;
    color: #000000;
}

Meu código:

nav li {
    display: inline;
    text-transform: uppercase;
    color: #000000;
}
1 resposta

Olá Gustavo,

Não sei te explicar a fundo este comportamento, porém o que eu vi é que a propriedade "color" não está sendo herdada pelo link (Tag a que está dentro da lista tag li), desta forma a cor que o navegador está exibindo é a padrão de links.

Já quando você aplica a propriedade "color" diretamente no link (Como foi utilizado pelo instrutor) aí sim o navegador assume ela no lugar da cor padrão.

Estou pesquisando para ver porque ocorre isso já que a propriedade color possui a característica de herança.

Espero ter ajudado de alguma forma!! Um abraço.