recherche

Maison  >  Questions et réponses  >  le corps du texte

Essayez de changer la couleur du bouton de menu pour travailler sur HTML

J'essaie de comprendre pourquoi le code que j'utilise ne fonctionne pas avec les styles des boutons de menu. J'ai créé des styles pour les boutons de menu individuels mais il semble qu'ils ne soient pas utilisés. Tous mes boutons de menu sont dans le style par défaut "ul.menu li a", pas dans les styles que je crée individuellement. Je suis nouveau dans ce domaine, désolé si j'ai l'air paresseux. 

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粉116654495456 Il y a quelques jours655

répondre à tous(2)je répondrai

  • P粉345302753

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

    Si vous souhaitez sélectionner une balise dans la balise li, elle devrait ressembler à ceci : 

    ul li a {...}

    ou un tag avec classe spéciale : 

    a.novo-produto {...}

    ".novo-produto a" est incorrect. De cette façon, vous pouvez sélectionner toutes les balises à l'intérieur de chaque élément avec la classe novo-produto ; cela n'est pas disponible dans votre code HTML et vous ne le souhaitez pas. Je pense que c'est ce dont vous avez besoin : 

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

    répondre
    0
  • P粉343408929

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

    Essayez ceci, cela fonctionnera parfaitement : 

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

    La raison pour laquelle cela ne fonctionne pas est que lorsque vous écrivez ".pesquisar-produto a", il sélectionne la balise à l'intérieur de la classe ".pesquisar-produto". Au lieu de cela, vous devez écrire "a.pesquisar-produto" qui sélectionne les balises contenant la classe ".pesquisar-produto".

    Cela ne fonctionne toujours pas car il faut être plus précis puisque vous avez déjà la règle CSS "ul.menu li a" plus spécifique. Par conséquent, pour remplacer la règle précédente, vous devez écrire le "ul.menu li a.novo-produto" plus spécifique. N'oubliez pas : il s'agit d'une question spécifique.

    répondre
    0
  • Annulerrépondre