Minha ancora que recebeu ID, não recebe cor quando passo com o mouse?
header nav ul li a:hover{ text-decoration: underline; color: red; }
fazendo da forma de baixo sim ele recebe a cor.
header nav ul li #ativo:hover, header nav ul li a:hover{ text-decoration: underline; color: red; }
Dessa forma que fiz é semântica? Tem outra forma de selecionar primeiro elemento do NAV?
hoje, com a Alura e o Google Gemini
Coloca exclamação important depois da cor que acho que dá certo. Utilizando seu primeiro exemplo acima:
header nav ul li a:hover{ text-decoration: underline; color: red !important; }
esse ! important diz que a preferência na hierarquia passa a ser ele.
ola, Leonardo. é possível sim ajustar para setar os elementos pela TAG, mas é muitíssimo recomendado que usemos classes, ID ou algo que seja mais semântico para um bom entendimento no futuro. Uma opção que é bastante utilizada é o padrão de nomenclatura BEM: ( https://www.alura.com.br/artigos/criando-componentes-css-com-padrao-bem )
desta forma, você pode ao invés de utilizar esse encadeamento de tags (ul li a .......) você pode fazer o seguinte:
exemplo simples de HTML
<section class="container">
<ul class:"container__lista">
<li class:"lista__item">Item 1</li>
<li class:"lista__item">Item 2</li>
<li class:"lista__item">Item 3</li>
</ul>
</section>CSS
.lista__item {
text-decoration: none;
color: blue;
}
.lista__item:hover {
text-decoration: underline;
color: red;
}