Seria interessante você postar seu código html e css para entendermos o que está acontecendo.
Uma dica, para escrever tags no fórum deixe ela entre aspas, assim:
Acho que entendi seu problema, mas não tenho certeza.
No CSS o nav a {}
faz referência aos itens que estão dentro da tag <nav>
seguido da tag <a>
.
Como se fosse uma pasta, onde você quer alterar os arquivos dentro da pasta <a>
que está dentro de outra pasta <nav>
, se tiver algum outro <a>
no arquivo html não será afetado, somente os que estão nesse caminho <nav>
> <a>
.
Diferente do nav a {}
que irá alterar tudo que existe com esse caminho, a classe vai afetar apenas os itens que estiverem especificados como membros da classe, seguindo essa lógica, para utilizar uma classe, você deve colocar a classe em todos os <a>
que deseja alterar o estilo.
<nav>
<ul>
<li><a class="menu" href="index.html">Home</a></li>
<li><a class="menu" href="produtos.html">Produtos</a></li>
<li><a class="menu" href="contato.html">Contato</a></li>
</ul>
</nav>
Para chamar a classe no arquivo CSS é necessário utilizar o .
+ nome da classe
seguido de {}
, ficando as configurações de estilo dentro das {}
:
.menu{
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
Você também pode fazer a classe direto no <ul>
para não precisar ficar repetindo a classe várias vezes:
<nav>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
Mas se preferir fazer a lista no <ul>
, o text-decoration: none;
só irá funcionar se você colocar o caminho .menu a {}
:
.menu a{
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}