J'essaie de comprendre pourquoi le code que j'utilise ne fonctionne pas avec les styles des boutons de menu. J'ai créé des styles pour les boutons de menu individuels mais il semble qu'ils ne soient pas utilisés. Tous mes boutons de menu sont dans le style par défaut "ul.menu li a", pas dans les styles que je crée individuellement. Je suis nouveau dans ce domaine, désolé si j'ai l'air paresseux.
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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous souhaitez sélectionner une balise dans la balise li, elle devrait ressembler à ceci :
ul li a {...}ou un tag avec classe spéciale :
a.novo-produto {...}".novo-produto a" est incorrect. De cette façon, vous pouvez sélectionner toutes les balises à l'intérieur de chaque élément avec la classe novo-produto ; cela n'est pas disponible dans votre code HTML et vous ne le souhaitez pas. Je pense que c'est ce dont vous avez besoin :
a.novo-produto {...} a.pesquisar-produto {...} ...Essayez ceci, cela fonctionnera parfaitement :
ul.menu li a.novo-produto{ /* Customizações para o botão Novo Produto */ background-color: #ffcc00; color: #fff; }La raison pour laquelle cela ne fonctionne pas est que lorsque vous écrivez ".pesquisar-produto a", il sélectionne la balise à l'intérieur de la classe ".pesquisar-produto". Au lieu de cela, vous devez écrire "a.pesquisar-produto" qui sélectionne les balises contenant la classe ".pesquisar-produto".
Cela ne fonctionne toujours pas car il faut être plus précis puisque vous avez déjà la règle CSS "ul.menu li a" plus spécifique. Par conséquent, pour remplacer la règle précédente, vous devez écrire le "ul.menu li a.novo-produto" plus spécifique. N'oubliez pas : il s'agit d'une question spécifique.