Bagaimanakah Saya Boleh Menyasarkan Elemen dengan Berbilang Kelas Menggunakan Pemilih CSS?

Pemilih CSS untuk Elemen dengan Pelbagai Kelas

Menentukan cara untuk menyasarkan elemen dengan kombinasi kelas tertentu dalam CSS boleh menjadi keperluan biasa dalam pembangunan web . Pertimbangkan senario ini di mana tiga elemen div mempunyai gabungan kelas yang berbeza:

<br><div><div class="foo bar">Hello World</div><br>&lt ;div>

Tugasnya ialah untuk memilih elemen kedua, yang mempunyai kedua-dua kelas foo dan bar.

Penyelesaian: Pemilih Kelas Berantai

Untuk mencapai ini, pemilih CSS menyediakan penyelesaian yang mudah: pemilih kelas rantaian. Hanya tulis nama kelas bersama-sama, tanpa sebarang ruang, seperti dalam kod ini:

.foo.bar {
  /* Styles for elements with both foo and bar classes */
}

Pemilih ini hanya akan digunakan pada elemen div kedua dalam HTML yang disediakan, kerana ia adalah satu-satunya elemen yang mempunyai kedua-dua kelas .

Awas untuk Internet Explorer 6

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa Internet Explorer 6 mempunyai kaveat mengenai pemilih kelas berantai. Ia hanya mengiktiraf pemilih kelas terakhir dalam rantaian, mengabaikan mana-mana yang sebelumnya. Dalam contoh di atas, IE6 hanya akan menggunakan gaya pada elemen dengan kelas bar, bukan pada elemen yang juga mempunyai kelas foo.

Contoh

Pertimbangkan perkara berikut coretan:

*{
  color:black;
}

.foo.bar {
  color:red;
}

<div>

Dalam senario ini, penyemak imbas bukan IE6 akan menggunakan warna merah pada yang kedua div, manakala IE6 akan menggunakannya pada div ketiga kerana ia hanya mempertimbangkan kelas bar. Tingkah laku ini boleh menjadi sangat penting untuk diketahui jika menyokong pelayar lama adalah satu keperluan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyasarkan Elemen dengan Berbilang Kelas Menggunakan Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!