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> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 {...} ...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.