简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Versuchen Sie, die Farbe der Menüschaltfläche zu ändern, damit sie mit HTML funktioniert
P粉116654495
P粉116654495 2023-09-13 21:13:41
0
2
573

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粉116654495
P粉116654495

Antworte allen(2)
P粉345302753
P粉3453027532023-09-14 20:25:59 2 Etage

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

ul li a {...}

或具有特殊类的 a 标签：

a.novo-produto {...}

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

a.novo-produto {...}
a.pesquisar-produto {...}
...
Wie +0
Antwort hinzufügen
P粉343408929
P粉3434089292023-09-14 18:57:39 1 Etage

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

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！