Bagaimanakah Saya Boleh Memilih Elemen HTML dengan Berbilang Kelas Menggunakan Pemilih CSS?

Menyasarkan Elemen dengan Pelbagai Kelas Menggunakan Pemilih CSS

Apabila bekerja dengan HTML dan CSS, anda mungkin menghadapi situasi di mana anda perlu memilih elemen berdasarkan pada nilai kelas tertentu. Satu keperluan biasa ialah memilih elemen dengan berbilang kelas yang diperuntukkan kepada mereka.

Soalan:

Diberikan tiga div dengan kelas berikut:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

Bagaimana anda boleh menulis CSS untuk memilih elemen kedua sahaja (dengan kelas "foo bar") menggunakan CSS pemilih?

Jawapan:

Untuk memilih elemen dengan berbilang kelas, hanya rantaikan pemilih kelas tanpa sebarang ruang di antaranya. Dalam contoh ini, kod CSS ialah:

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

Pemilih ini akan menggunakan gaya pada div kedua, kerana ia adalah satu-satunya elemen yang mempunyai kedua-dua kelas "foo" dan "bar" yang diberikan kepadanya .

Nota Tambahan:

Pelayar lama seperti Internet Explorer 6 mungkin tidak mentafsir dengan betul pemilih kelas berantai. IE6 hanya akan membaca pemilih kelas terakhir dan mengabaikan yang lain. Untuk memastikan keserasian dengan IE6, anda harus mengelak daripada menggunakan pemilih kelas berantai dan sebaliknya menggunakan pemilih yang lebih khusus, seperti:

div.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

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