简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Try changing menu button color to work on html

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粉116654495P粉116654495401 days ago598

reply all(2)I'll reply

  • P粉345302753

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

    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 {...}
...

    reply
    0
  • P粉343408929

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

    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.

    reply
    0
  • Cancelreply