简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
嘗試更改選單按鈕顏色以在 html 上工作
P粉116654495
P粉116654495 2023-09-13 21:13:41
0
2
623

我試著理解為什麼我使用的程式碼無法使用選單按鈕上的樣式。 我為單獨的選單按鈕製作了樣式，但似乎它們沒有被使用。 我的所有選單按鈕均採用預設的“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粉116654495
P粉116654495

全部回覆(2)
P粉345302753
P粉3453027532023-09-14 20:25:59 2樓

如果你想在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 1樓

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

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
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！