简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

嘗試更改選單按鈕顏色以在 html 上工作

我試著理解為什麼我使用的程式碼無法使用選單按鈕上的樣式。 我為單獨的選單按鈕製作了樣式，但似乎它們沒有被使用。 我的所有選單按鈕均採用預設的“ul.menu li a”樣式，而不是我單獨製作的樣式。 我對此很陌生，很抱歉，如果我看起來很懶。 

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 天前597

全部回覆(2)我來回復

  • P粉345302753

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

    如果你想在li標籤中選擇一個標籤，應該是這樣的：

    ul li a {...}

    或具有特殊類別的 a 標籤：

    a.novo-produto {...}

    “.novo-produto a”不正確。這樣，您就可以選擇每個具有 novo-produto 類別的元素內的所有 a 標籤；這在您的 html 中不可用，並且您不想要它。 我認為這就是您所需要的：

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

    回覆
    0
  • P粉343408929

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

    試試這個，它會完美地工作：

    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”。請記住：這是一個具體問題。

    回覆
    0
  • 取消回覆