简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

Cuba tukar warna butang menu untuk berfungsi pada html

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粉116654495P粉116654495401 hari yang lalu599

membalas semua(2)saya akan balas

  • P粉345302753

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

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

    balas
    0
  • P粉343408929

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

    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.

    balas
    0
  • Batalbalas