Diferença entre nav li e nav a

Oi Caroline!

Neste caso, como dentro da <li> temos apenas um elemento, que é o <a> realmente não há diferença.

Mas supondo que além dele, teremos um <p>, desta forma:

<ul>
    <li>
        <a href="link1">Primeiro</a>
        <p>descrição do primeiro link</p>
    </li>
    <li>
        <a href="link2">segundo</a>
        <p>descrição do segundo link</p>
    </li>
</ul>

Utilizando text-transform: uppercase na <li>, teríamos tanto o link quanto o parágrafo em letras maísculas.

Porém se a estilização fosse só no <a>, o parágrafo não receberia a alteração.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui.

Fala Caroline, tudo bem?

Apenas um complemento a resposta do Edu, a tag a há algumas propriedades que só podem ser estilizadas selecionando essa tag diretamente, por exemplo, colocando uma classe ou id nessa tag e estilizando, ou selecionando o a diretamente como você fez. Mas também há algumas propriedades CSS que podem ser herdadas de seu elemento pai, como você fez estilizando o nav li. Alguns exemplos:

nav li {
    color: #fff;
}

Nesse caso não funcionará, pois color é uma propriedade que deve ser estilizada diretamente selecionando a tag a. Porém você pode utilizar o valor inherit que serve justamente para herdar valores do elemento pai. por exemplo:

.nav li {
    color: #fff;
}

.nav a {
    color: inherit;
}

Nesse caso, como colocamos a cor como inherit ela herdará a cor do elemento li.

Bons estudos! ;D

Obrigada pelas respostas! Agora entendo melhor como funciona a tag a dentro da tag li. Achei interessante a propriedade inherit, não conhecia. Vou fazer mais alguns testes no meu código para fixar o conteúdo. :D