Não entendi a diferença entre "nav a" e "nav li"

Olá, Klayton.

Tudo bem?

Então, essa é uma característica do link no caso a tag <a>. A tag <a> precisa ser especificada para ela receber por exemplo uma cor, você tem que referênciar ela com a tag pai do pai ou simplesmente pela tag pai seguida dela como por exemplo "nav a", ou colocando uma classe direto na tag <a>. Como eu disse é uma particularidade dela <a>, as outras tags aceita de boa referênciar só pela tag pai. Faz alguns testes ai e você vai entender.

Espero ter ajudado.

Qualquer dúvida manda aqui :)

Valeu!!

Renan, obrigado pelo retorno.

Mas acho que não é bem essa a minha dúvida. Fiquei confuso com relação a utilização do CSS para a tag <a> ao invés da tag <li>. Na aula é recomendado utilizar as propriedades text-transform, font-weight, font-size, text-decoration e color na tag <a>, sendo que as propriedades text-transform, font-weight, font-size também funcionam se associadas a tag <li>. E as propriedades text-decoration e color só funcionam se associadas a tag <a> conforme informado no vídeo do curso. Eu aceito um "porque é assim, e ponto!", mas é que, tentando entender logicamente como as coisas funcionam, na minha cabeça faria mais sentido essas propriedades estarem na tag <li>.

Até porque como resultado final o que ganha a nova formatação são as palavras "HOME, PRODUTOS E CONTATO" e não os links. No código apresentado no curso existe até uma equivalência do texto do link com o texto do HTML(segue abaixo).

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contatos.html">Contatos</a></li>
                </ul>
            </nav>

Mas imagina num código em que os arquivos de html linkados não tem nada haver com o texto exibido, não faz sentido a formatação do texto estar na tag <a>, não são os links que eu quero formatar, e sim o texto.

            <nav>
                <ul>
                    <li><a href="bananas.html">Home</a></li>
                    <li><a href="amigo.html">Produtos</a></li>
                    <li><a href="tablet.html">Contatos</a></li>
                </ul>
            </nav>

Consegui me fazer entender sobre qual seria meu questionamento?

Beleza. Vamos lá!

A tag <a> é uma tag como as outras ela mostra um texto na tela, no caso o que vai aparecer é o que está entre as tags, exemplo <a href="index.html">página inicial<a> o que vai mostrar é página inicial, chamamos ela de link por ela estar linkando a página que está no href no caso o arquivo da página a ser chamada, ou seja, a index.html.

O href não recebe estilo por ser um atributo da tag <a> ele é a referência da página que vai abrir ao clicar.

A tag de link <a> por padrão vem na cor azul meio roxo e sublinhada, para sabermos diferenciar ela das palavras das outras tag que são só texto e não clicáveis, como o <p>, <h1> etc.

Depois de colocar os estilos sabemos que ela é um link por ela estar na <nav> que é a navegação e ou quando colocamos o efeito de :hover com o cursor: pointer; que a setinha do mouse vira uma mãozinha mostrando que alí há um link e é clicável.

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    right: 0;
    top: 110px;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

Renan, obrigado pela explicação, mas acho que ainda não é esse meu questionamento.

O código CSS acima, nas linhas 19 e 20, tem propriedades para formatar o texto que está nos itens da lista (<li>) da tag <nav>, já as propriedades das linhas 24 a 28, estão relacionadas ao link (<a>) da tag <nav>, minha pergunta é, por que não posso colocar todas essas propriedades na <li>? algumas delas (text-decoration e color) só funcionam na <a>.

Detalhe, ambos, tanto o <li> quanto o <a>, estão formatando mesmo texto no navegador "HOME, PRODUTOS E CONTATO", como saber qual propriedade devo formatar em cada tag, se não houvesse o vídeo para eu "colar" essa separação, por dedução, nunca saberia porque uma propriedade X deve ser declarada em uma tag e a Y na outra.

Oi, Klayton.

Pensa assim: no CSS, a tag <li> está editando os itens (Home, Produtos, Contato), enquanto a tag <a> está editando a função link.

Ou seja, tenha as palavras e o link como coisas separadas, com <li> editando a aparência das palavras e <a> editando a aparência do link.

Como a aparência padrão do texto é cor preta, sem sublinhado, não precisaria ser editada com color: #000000 e text-decoration: none. Só que o link padrão, que é automaticamente aplicado com a tag <a href="link">, é azul (ou roxo claro, uma vez clicado), com sublinhado. Dessa forma, qualquer alteração em cor ou decoração precisa ser feita "em cima" da aparência padrão, na tag <a>.

Espero ter ajudado.

oiii Klayton, boa noite!!!!

                <nav>
                     <ul>
                         <li><a href="index.html">Home</a></li>
                         <li><a href="produtos.htm">Produtos</a></li>
                         <li><a href="contato.html">Contato</a></li>
                     </ul>                 
                 </nav>



                me parece que ele utiliza a tag <a> em vez da tag<li> pois na tag <a> está mais especificada do que a tag<li> pois com esta vc poderia adicionar mais itens na lista em vez do "home" ou "produtos" por exemplo

                alem disso, 

                a tag <a> faz referencia a pretensão, posteriormente, de usar o hiperlink

                é usado a tag<a> ----- documentations -----

                https://www.w3schools.com/tags/tag_a.asp

                Definition and Usage
                The <a> tag defines a hyperlink, which is used to link from one page to another.

                The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

                Tip: If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.

                algumas dicas sobre a tag <a>