I'm trying to understand why the code I'm using doesn't work with the styles on the menu buttons. I made styles for the individual menu buttons but it seems they are not being used. All my menu buttons are in the default "ul.menu li a" style, not the styles I make individually. I'm new to this, sorry if I seem lazy.
ul.menu {
list-style-type: none;
margin: 200;
padding: 100;
}
ul.menu li {
display: inline-block;
margin-right: 10px;
}
ul.menu li a {
text-decoration: none;
padding: 10px 20px;
background-color: #f2f2f2;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Roboto;
}
ul.menu li a:hover {
background-color: #ddd;
}
/* Estilos CSS para botões individuais */
.novo-produto a {
/* Customizações para o botão Novo Produto */
background-color: #ffcc00;
color: #fff;
}
.pesquisar-produto a {
/* Customizações para o botão Pesquisar Produto */
background-color: #0099cc;
color: #fff;
}
.novo-movimento a {
/* Customizações para o botão Novo Movimento */
background-color: #00cc66;
color: #fff;
}
.pesquisar-movimento a {
/* Customizações para o botão Pesquisar Movimento */
background-color: #cc6600;
color: #fff;
}
</style>
</head>
<body>
<nav>
<ul class="menu">
<li><a class="novo-produto" href="#novo-produto">Novo Produto</a></li>
<li><a class="pesquisar-produto" href="#pesquisar-produto">Pesquisar Produto</a></li>
<li><a class="novo-movimento" href="#novo-movimento">Novo Movimento</a></li>
<li><a class="pesquisar-movimento" href="#pesquisar-movimento">Pesquisar Movimento</a></li>
</ul>
</nav> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you want to select a tag in the li tag, it should be like this:
ul li a {...}or a tag with special class:
a.novo-produto {...}".novo-produto a" is incorrect. This way you can select all a tags inside each element with novo-produto class; this is not available in your html and you don't want it. I think this is what you need:
a.novo-produto {...} a.pesquisar-produto {...} ...Try this, it will work perfectly:
ul.menu li a.novo-produto{ /* Customizações para o botão Novo Produto */ background-color: #ffcc00; color: #fff; }The reason it doesn't work is that when you write ".pesquisar-produto a", it selects the tag inside the ".pesquisar-produto" class. Instead, you should write "a.pesquisar-produto" which selects tags containing the class ".pesquisar-produto".
It still doesn't work because you have to be more specific since you already have the more specific "ul.menu li a" CSS rule. Therefore, to override the previous rule you have to write the more specific "ul.menu li a.novo-produto". Remember: this is a specific question.