Jak wybrać etykietę = = XYZ w CSS?

HTML:

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

CSS:

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

Chcę wybrać etykietę na podstawie atrybutu „for”, aby wprowadzić zmiany w układzie.

Selektor byłby label[for=email], więc w CSS:

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

... lub w JavaScript za pomocą DOM:

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

... lub w JavaScript za pomocą jQuery:

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

To selektor atrybutów . Zauważ, że niektóre przeglądarki (na przykład wersje IE <8) mogą nie obsługiwać selektorów atrybutów, ale nowsze. Aby obsługiwać starsze przeglądarki, takie jak IE6 i IE7, musiałbyś niestety użyć klasy (dobrze lub innej strukturalnej metody).

(Zakładam, że szablon {t _your_email}wypełni pole z id="email". Jeśli nie, użyj klasy.)

Zauważ, że jeśli wartość wybranego atrybutu nie jest zgodna z regułami dla identyfikatora CSS (na przykład, jeśli ma w nim spacje lub nawiasy, lub zaczyna się cyfrą itp.), Potrzebujesz cudzysłowów wokół wartość:

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

Mogą to być pojedyncze lub podwójne cudzysłowy .

Jeśli treść jest zmienną, konieczne będzie połączenie jej ze znakami cudzysłowu. To zadziałało dla mnie. Lubię to:

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