简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Essayez de changer la couleur du bouton de menu pour travailler sur HTML
P粉116654495
P粉116654495 2023-09-13 21:13:41
0
2
571

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

répondre à tous(2)
P粉345302753
P粉3453027532023-09-14 20:25:59 2 plancher

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 {...}
...
Comme +0
Ajouter une réponse
P粉343408929
P粉3434089292023-09-14 18:57:39 1 plancher

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.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！