我试图理解为什么我使用的代码无法使用菜单按钮上的样式。 我为单独的菜单按钮制作了样式,但似乎它们没有被使用。 我的所有菜单按钮均采用默认的“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>
如果你想在li标签中选择一个标签,应该是这样的:
或具有特殊类的 a 标签:
“.novo-produto a”不正确。这样,您就可以选择每个具有 novo-produto 类的元素内的所有 a 标签;这在您的 html 中不可用,并且您不想要它。 我认为这就是您所需要的:
试试这个,它会完美地工作:
它不起作用的原因是,当您编写“.pesquisar-produto a”时,它选择了“.pesquisar-produto”类内部的标签。相反,您应该编写“a.pesquisar-produto”,它选择包含“.pesquisar-produto”此类的标签。
它仍然不起作用,因为你必须更具体,因为你已经有了更具体的“ul.menu li a”CSS规则。因此,要覆盖之前的规则,您必须编写更具体的“ul.menu li a.novo-produto”。请记住:这是一个具体问题。