CSS'de = “XYZ” için etiket nasıl seçilir?

HTML:

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

CSS:

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

Düzen değişiklikleri yapmak için 'for' özelliğine göre etiketi seçmek istiyorum.

Seçici label[for=email], CSS'de şöyle olur:

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

... veya DOM'u kullanarak JavaScript'te:

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

... veya jQuery kullanarak JavaScript'te:

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

Bir özellik seçici . Bazı tarayıcıların (örneğin IE <8 sürümleri) özellik seçicileri desteklemeyebileceğini, ancak daha yeni tarayıcıların desteklediğini unutmayın. IE6 ve IE7 gibi eski tarayıcıları desteklemek için ne yazık ki bir sınıf (iyi veya başka bir yapısal yol) kullanmanız gerekir.

(Şablonun {t _your_email}bir alanı dolduracağını varsayıyorum id="email". Değilse, bunun yerine bir sınıf kullanın.)

Seçtiğiniz özniteliğin değeri bir CSS tanımlayıcısı kurallarına uymuyorsa (örneğin, içinde boşluklar veya köşeli ayraçlar varsa veya bir rakamla başlıyorsa vb.), değeri:

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

Bunlar tek veya çift tırnak olabilir .

İçerik bir değişkendirse, onu tırnak işaretleri ile birleştirmek gerekir. Benim için çalıştı. Bunun gibi:

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