Bagaimana cara memilih label untuk = "XYZ" di CSS?

HTML:

<label for="email">{t _your_email}:</label>

CSS:

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

Saya ingin memilih label berdasarkan atribut 'untuk' untuk membuat perubahan tata letak.

Pemilih akan label[for=email], jadi dalam CSS:

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

... atau dalam JavaScript menggunakan DOM:

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

... atau dalam JavaScript menggunakan jQuery:

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

Ini adalah pemilih atribut . Perhatikan bahwa beberapa browser (versi IE <8, misalnya) mungkin tidak mendukung pemilih atribut, tetapi yang lebih mutakhir melakukannya. Untuk mendukung browser lama seperti IE6 dan IE7, Anda harus menggunakan kelas (baik, atau cara struktural lainnya), sayangnya.

(Saya berasumsi bahwa templat {t _your_email}akan mengisi bidang dengan id="email". Jika tidak, gunakan kelas sebagai gantinya.)

Perhatikan bahwa jika nilai atribut yang Anda pilih tidak sesuai dengan aturan untuk pengenal CSS (misalnya, jika memiliki spasi atau tanda kurung di dalamnya, atau dimulai dengan angka, dll.), Anda perlu tanda kutip di sekitar nilai:

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

Itu bisa berupa kutipan tunggal atau ganda .

Jika kontennya variabel, Anda harus menyatukannya dengan tanda kutip. Ini berhasil untuk saya. Seperti ini:

itemSelected (id: number) {
    console.log ('label berisi', document.querySelector ("label [for = '" + id + "']")));
}