我试图理解为什么我使用的代码无法使用菜单按钮上的样式。 我为单独的菜单按钮制作了样式，但似乎它们没有被使用。 我的所有菜单按钮均采用默认的“ul.menu li a”样式，而不是我单独制作的样式。 我对此很陌生，很抱歉，如果我看起来很懒。
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> 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
如果你想在li标签中选择一个标签，应该是这样的：
ul li a {...}或具有特殊类的 a 标签：
a.novo-produto {...}“.novo-produto a”不正确。这样，您就可以选择每个具有 novo-produto 类的元素内的所有 a 标签；这在您的 html 中不可用，并且您不想要它。 我认为这就是您所需要的：
a.novo-produto {...} a.pesquisar-produto {...} ...试试这个，它会完美地工作：
ul.menu li a.novo-produto{ /* Customizações para o botão Novo Produto */ background-color: #ffcc00; color: #fff; }它不起作用的原因是，当您编写“.pesquisar-produto a”时，它选择了“.pesquisar-produto”类内部的标签。相反，您应该编写“a.pesquisar-produto”，它选择包含“.pesquisar-produto”此类的标签。
它仍然不起作用，因为你必须更具体，因为你已经有了更具体的“ul.menu li a”CSS规则。因此，要覆盖之前的规则，您必须编写更具体的“ul.menu li a.novo-produto”。请记住：这是一个具体问题。