suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Versuchen Sie, die Farbe der Menüschaltfläche zu ändern, damit sie mit HTML funktioniert

Ich versuche zu verstehen, warum der von mir verwendete Code nicht mit den Stilen auf den Menüschaltflächen funktioniert. Ich habe Stile für die einzelnen Menüschaltflächen erstellt, aber es scheint, dass sie nicht verwendet werden. Alle meine Menüschaltflächen haben den Standardstil „ul.menu li a“, nicht die Stile, die ich individuell erstelle. Ich bin neu in diesem Bereich, tut mir leid, wenn ich faul wirke. 

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粉116654495P粉116654495455 Tage vor651

Antworte allen(2)Ich werde antworten

  • P粉345302753

    P粉3453027532023-09-14 20:25:59

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

    ul li a {...}

    或具有特殊类的 a 标签：

    a.novo-produto {...}

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

    a.novo-produto {...}
a.pesquisar-produto {...}
...

    Antwort
    0
  • P粉343408929

    P粉3434089292023-09-14 18:57:39

    试试这个，它会完美地工作：

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

    Antwort
    0
  • StornierenAntwort