HTML菜单按钮自定义CSS样式不生效问题求助

核心问题：CSS选择器匹配错误 #

你写的.novo-produto a这类选择器，是在寻找拥有.novo-produto类的元素内部的<a>标签，但你的HTML里是<a class="novo-produto">——类直接加在了<a>标签本身上，所以这些自定义选择器根本匹配不到目标元素，自然不会生效。

另外，就算选择器写对了，ul.menu li a的选择器优先级（权重）也比单独的类选择器高，所以需要确保自定义样式的优先级足够覆盖默认样式。

修正后的CSS代码 #

把自定义样式的选择器改成直接匹配带类的<a>标签即可，比如：

/* Estilos CSS para botões individuais */
ul.menu li a.novo-produto {
  /* Customizações para o botão Novo Produto */
  background-color: #ffcc00;
  color: #fff;
}

ul.menu li a.pesquisar-produto {
  /* Customizações para o botão Pesquisar Produto */
  background-color: #0099cc;
  color: #fff;
}

ul.menu li a.novo-movimento {
  /* Customizações para o botão Novo Movimento */
  background-color: #00cc66;
  color: #fff;
}

ul.menu li a.pesquisar-movimento {
  /* Customizações para o botão Pesquisar Movimento */
  background-color: #cc6600;
  color: #fff;
}

或者简化成（优先级足够覆盖默认样式）：

/* Estilos CSS para botões individuais */
a.novo-produto {
  background-color: #ffcc00;
  color: #fff;
}

a.pesquisar-produto {
  background-color: #0099cc;
  color: #fff;
}

a.novo-movimento {
  background-color: #00cc66;
  color: #fff;
}

a.pesquisar-movimento {
  background-color: #cc6600;
  color: #fff;
}

额外小提示 #

你的ul.menu里的margin: 200和padding: 100没有写单位，建议加上px，比如margin: 200px; padding: 100px;，否则浏览器可能无法正确解析。

内容的提问来源于stack exchange，提问作者kikalalu