Bagaimana untuk Mengecualikan Nama Kelas Tertentu dalam Pemilih CSS?

Mengecualikan Nama Kelas Khusus dalam Pemilih CSS

Dalam CSS, terdapat keadaan di mana anda mungkin perlu mengecualikan nama kelas tertentu daripada pemilih anda. Ini amat berguna apabila anda ingin menggunakan gaya pada berbilang elemen, tetapi gaya tertentu tidak seharusnya mewarisi gaya tersebut.

Satu senario biasa melibatkan mengecualikan elemen dengan nama kelas tertentu semasa menggunakan gaya pada elemen dengan nama kelas lain. Mari kita pertimbangkan contoh 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>

Dalam contoh ini, kami ingin menggunakan warna latar belakang pada elemen dengan nama kelas "reMode_hover" pada tuding. Walau bagaimanapun, kami tidak mahu menggunakan warna ini jika elemen juga mempunyai nama kelas "reMode_selected".

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

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

Walaupun anda mungkin menjangkakan peraturan pertama akan berfungsi, ia tidak. Ini kerana dalam CSS, ruang antara nama kelas menandakan pemilih keturunan. Jadi, ".reMode_selected .reMode_hover" diterjemahkan kepada "elemen pilih .reMode_hover yang merupakan keturunan .reMode_selected."

Untuk mengecualikan elemen "reMode_selected" dengan betul, kita perlu menggunakan pemilih "not()". CSS yang dikemas kini ialah:

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

Peraturan ini akan menggunakan warna latar belakang pada elemen .reMode_hover yang tidak mempunyai nama kelas .reMode_selected. Akibatnya, hanya pautan pertama akan menerima warna latar belakang pada tuding, manakala pautan kedua tidak akan.

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