Bagaimana untuk Mengecualikan Kelas Tertentu daripada Pemilih CSS?

Bagaimana untuk Mengecualikan Kelas Tertentu daripada Pemilih CSS?

Apabila bekerja dalam persekitaran terhad di mana JavaScript tidak tersedia, CSS menjadi alat penting untuk penggayaan dinamik. Satu cabaran biasa ialah cara untuk menghalang elemen tertentu daripada dipengaruhi oleh peraturan CSS tertentu apabila ia juga mempunyai kelas lain.

Untuk menggambarkan, pertimbangkan tugas menukar warna latar belakang elemen pada hover melainkan ia juga mempunyai kelas "reMode_selected". Kod berikut menunjukkan percubaan untuk mencapai ini:

<code class="css">/* Do not apply background-color */
.reMode_selected .reMode_hover:hover {
}

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

Walau bagaimanapun, pendekatan ini gagal kerana ia menyasarkan elemen dengan kedua-dua kelas "reMode_hover" dan "reMode_selected", tidak kira sama ada acara hover dicetuskan. Untuk menyelesaikan isu ini, pemilih berbilang kelas mesti digunakan tanpa jarak (pemilih keturunan):

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

Pemilih ini menggunakan kelas pseudo ":bukan" untuk mengecualikan elemen dengan kelas "reMode_selected" daripada penggayaan warna latar belakang apabila menuding pada elemen "reMode_hover".

Atas ialah kandungan terperinci Bagaimana untuk Mengecualikan Kelas Tertentu daripada Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!