Bagaimanakah cara saya Menggayakan Label Khusus Menggunakan Pemilih Atribut dalam CSS?

Cara Menggayakan Label Khusus Menggunakan Pemilih Atribut

Apabila bekerja dengan borang HTML, anda mungkin mendapati situasi di mana anda perlu menggunakan gaya unik untuk label khusus berdasarkan elemen input yang berkaitan. Dalam CSS, anda boleh mencapai ini dengan menggunakan pemilih atribut.

Pemilihan Atribut dengan "untuk" Atribut

Dalam contoh anda, anda ingin memilih label berdasarkan nilai atribut "untuk". Begini cara untuk melakukannya:

label[for="email"] {
  /* Styles here will apply only to the label with the "for" attribute value set to "email" */
}

Pemilih ini sepadan dengan mana-mana elemen label yang mempunyai atribut "untuk" dengan nilai "e-mel." Anda kemudiannya boleh menggunakan gaya tersuai dalam blok.

Contoh Pelaksanaan

• CSS:

  label[for="email"] {
    color: red;
  }

  Salin selepas log masuk

• JavaScript melalui DOM:

  const emailLabel = document.querySelector("label[for=email]");
  emailLabel.style.color = "blue";

  Salin selepas log masuk

• JavaScript melalui jQuery:

  $("label[for=email]").css("color", "green");

  Salin selepas log masuk

Nota: Pemilih atribut disokong oleh penyemak imbas moden, tetapi ambil perhatian tentang isu keserasian dengan yang lebih lama versi Internet Explorer. Pertimbangkan untuk menggunakan kelas atau kaedah struktur lain untuk sokongan penyemak imbas lama.

Atas ialah kandungan terperinci Bagaimanakah cara saya Menggayakan Label Khusus Menggunakan Pemilih Atribut dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!