简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Cuba tukar warna butang menu untuk berfungsi pada html
P粉116654495
P粉116654495 2023-09-13 21:13:41
0
2
620

Saya cuba memahami mengapa kod yang saya gunakan tidak berfungsi dengan gaya pada butang menu. Saya membuat gaya untuk butang menu individu tetapi nampaknya ia tidak digunakan. Semua butang menu saya adalah dalam gaya lalai "ul.menu li a", bukan gaya yang saya buat secara individu. Saya baru mengenali ini, maaf jika saya kelihatan malas. 

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

membalas semua(2)
P粉345302753
P粉3453027532023-09-14 20:25:59 Tingkat 2

Jika anda ingin memilih tag dalam tag li, ia sepatutnya kelihatan seperti ini: 

ul li a {...}

atau tag dengan kelas khas: 

a.novo-produto {...}

".novo-produto a" tidak betul. Dengan cara ini anda boleh memilih semua teg dalam setiap elemen dengan kelas novo-produto ini tidak tersedia dalam html anda dan anda tidak mahukannya. Saya rasa inilah yang anda perlukan: 

a.novo-produto {...}
a.pesquisar-produto {...}
...
Suka +0
Tambah Balasan
P粉343408929
P粉3434089292023-09-14 18:57:39 Tingkat 1

Cuba ini, ia akan berfungsi dengan sempurna: 

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

Sebab ia tidak berfungsi ialah apabila anda menulis ".pesquisar-produto a", ia memilih teg di dalam kelas ".pesquisar-produto". Sebaliknya, anda harus menulis "a.pesquisar-produto" yang memilih teg yang mengandungi kelas ".pesquisar-produto".

Ia masih tidak berfungsi kerana anda perlu lebih spesifik kerana anda sudah mempunyai peraturan CSS "ul.menu li a" yang lebih khusus. Oleh itu, untuk mengatasi peraturan sebelumnya anda perlu menulis "ul.menu li a.novo-produto" yang lebih spesifik. Ingat: ini adalah soalan khusus.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！