Entrar Ainda não tem acesso?
1
resposta

Porque o atributo "color: #000000" não funciona estando dentro da tag "nav li" no CSS?

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Navegação entre páginas e atividade Arrumando a lista

por ISRAEL ALMEIDA CARDOSO JUNIOR
| 36k xp | 5 posts

Gostaria de entender o pq de o atributo "color: #000000" não funciona estando dentro da tag "nav li" no CSS? O professor colocou esse atributo na tag "nav a", mas não daria na mesma? Pois os itens da lista estão também dentro da tag "nav li".

<DOCTYPE html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Produtos -Barbearia Alura</title>
        <link rel="stylesheet" type="text/css" href="produtos.css">
    </head>
    <body>
        <header>
            <h1><img src="logo.png"></h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contatos</a></li>
                </ul>
            </nav>
        </header>

    </body>
</html>


___________________________________________________________________________________________________
header{
    background: #BBBBBB;
}

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

imagem mostrando que a cor dos itens da lista continuam azuis/roxos ao invés de preto

1 resposta
por Eduardo André Santos Cândido da Silva
| 96.3k xp | 1 posts

Grande Israel, sou novo por aqui e achei interessante sua pergunta. Não consigo esclarecer completamente sua dúvida, mas analisei algo curioso:

Quando retiramos o endereço de referência (href="") e deixamos a tag "a", o atributo color: #000000 funciona com a tag "nav li" no css. Dessa forma:

<head>
    <meta charset="UTF-8">
    <title>Produtos - Barbearia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="produtos.css">

</head>

<body>
    <header>
        <div class="caixa">
        <h1><img src="logo.png"></h1>
            <nav>
                <ul class="navegacao">
                    <li><a>Home</a></li>
                    <li><a>">Produtos</a></li>
                    <li><a>">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

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

Ela só deixar de funcionar quando o endereço de referência é inserido junto com a tag "a". Acredito que deve ter alguma relação com a ativação do anchor junto com o endereço de referência (href="").

Espero ter ajudado. Abraço.