Bagaimana untuk Menggayakan Label dengan Nilai Atribut 'untuk' Khusus dalam CSS?

Menggayakan Label dengan Atribut 'untuk' Khusus dalam CSS

Masalah:

Pertimbangkan kod HTML berikut:

<label for="email">Email:</label>

Bagaimanakah kita boleh memilih label ini dalam CSS berdasarkan nilai atribut 'for'nya, iaitu "e-mel"?

Penyelesaian:

Untuk menyasarkan label berdasarkan nilai atribut 'for' , gunakan pemilih CSS berikut:

label[for="XYZ"]

Ganti "XYZ" dengan nilai atribut yang diingini, dalam kes ini "e-mel":

label[for="email"]

Menggunakan pemilih ini, anda boleh menggunakan khusus gaya pada label:

label[for="email"] {
  /* ... Style definitions here ... */
}

Teknik Tambahan:

JavaScript:

Untuk memilih label menggunakan DOM dalam JavaScript, gunakan:

var element = document.querySelector("label[for=email]");

jQuery:

Dengan jQuery, pemilih menjadi:

var element = $("label[for=email]");

Nota Keserasian:

Pemilih atribut ialah disokong oleh kebanyakan pelayar moden. Walau bagaimanapun, jika anda perlu menyokong pelayar lama (cth., IE6, IE7), pertimbangkan untuk menggunakan kelas atau pendekatan struktur lain.

Mengendalikan Watak Khas:

Jika nilai atribut 'for' mengandungi aksara khas (cth., ruang, kurungan), sertakan nilai dalam petikan tunggal atau berganda:

label[for="field[]"]
{
    /* ...definitions here... */
}

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Label dengan Nilai Atribut 'untuk' Khusus dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!