Try changing menu button color to work on html
P粉116654495
P粉116654495 2023-09-13 21:13:41
0
2
621

I'm trying to understand why the code I'm using doesn't work with the styles on the menu buttons. I made styles for the individual menu buttons but it seems they are not being used. All my menu buttons are in the default "ul.menu li a" style, not the styles I make individually. I'm new to this, sorry if I seem lazy.

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

reply all(2)
P粉345302753

If you want to select a tag in the li tag, it should be like this:

ul li a {...}

or a tag with special class:

a.novo-produto {...}

".novo-produto a" is incorrect. This way you can select all a tags inside each element with novo-produto class; this is not available in your html and you don't want it. I think this is what you need:

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

Try this, it will work perfectly:

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

The reason it doesn't work is that when you write ".pesquisar-produto a", it selects the tag inside the ".pesquisar-produto" class. Instead, you should write "a.pesquisar-produto" which selects tags containing the class ".pesquisar-produto".

It still doesn't work because you have to be more specific since you already have the more specific "ul.menu li a" CSS rule. Therefore, to override the previous rule you have to write the more specific "ul.menu li a.novo-produto". Remember: this is a specific question.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!