尝试更改菜单按钮颜色以在 html 上工作
P粉116654495
P粉116654495 2023-09-13 21:13:41
0
2
648

我试图理解为什么我使用的代码无法使用菜单按钮上的样式。 我为单独的菜单按钮制作了样式,但似乎它们没有被使用。 我的所有菜单按钮均采用默认的“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>

P粉116654495
P粉116654495

全部回复(2)
P粉345302753

如果你想在li标签中选择一个标签,应该是这样的:

ul li a {...}

或具有特殊类的 a 标签:

a.novo-produto {...}

“.novo-produto a”不正确。这样,您就可以选择每个具有 novo-produto 类的元素内的所有 a 标签;这在您的 html 中不可用,并且您不想要它。 我认为这就是您所需要的:

a.novo-produto {...}
a.pesquisar-produto {...}
...
P粉343408929

试试这个,它会完美地工作:

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”。请记住:这是一个具体问题。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板