Cara Mengecualikan Kelas Tertentu daripada Pemilih CSS: Panduan Langkah demi Langkah

Mengecualikan Kelas Khusus daripada Pemilih CSS

Apabila menyasarkan elemen dengan berbilang kelas, adalah penting untuk memilih atau mengecualikan kelas tertentu dengan tepat untuk mencapai yang diingini penggayaan. Artikel ini menangani senario biasa di mana anda perlu menggunakan warna latar belakang pada elemen dengan kelas tertentu tetapi mengecualikan yang juga mempunyai kelas khusus lain.

Senario Contoh

Pertimbangkan penanda HTML berikut:

<code class="html"><a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a></code>

Matlamatnya adalah untuk menggunakan warna latar belakang pada pautan pertama apabila pengguna menuding di atasnya, tetapi kecualikan pautan kedua daripada kesan ini kerana ia mempunyai kelas tambahan "reMode_selected ."

Percubaan Awal

Anda boleh mencuba CSS berikut pada mulanya:

<code class="css">.reMode_selected .reMode_hover:hover {}

.reMode_hover:hover {
   background-color: #f0ac00;
}</code>

Walau bagaimanapun, ini tidak akan berfungsi dengan betul kerana yang pertama peraturan mengatasi peraturan kedua. Untuk mengecualikan elemen dengan kelas "reMode_selected" dengan betul, gunakan pemilih berbilang kelas:

<code class="css">.reMode_hover:not(.reMode_selected):hover {
   background-color: #f0ac00;
}</code>

Peraturan ini menyasarkan elemen dengan kelas "reMode_hover" tetapi mengecualikan elemen yang turut mempunyai kelas "reMode_selected" apabila ia dilegarkan. Akibatnya, pautan pertama akan menerima warna latar belakang pada tuding, manakala pautan kedua akan kekal tidak berubah.

Atas ialah kandungan terperinci Cara Mengecualikan Kelas Tertentu daripada Pemilih CSS: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!