Как выбрать метку для = «XYZ» в CSS?

HTML:

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

CSS:

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

Я хочу выбрать метку на основе атрибута «for» для внесения изменений в макет.

Селектор был бы label[for=email], поэтому в CSS:

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

... или в JavaScript с использованием DOM:

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

... или в JavaScript с использованием jQuery:

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

Это селектор атрибута . Обратите внимание, что некоторые браузеры (например, версии IE <8) могут не поддерживать селекторы атрибутов, но более поздние из них. Для поддержки старых браузеров, таких как IE6 и IE7, вам, к сожалению, придется использовать класс (ну или каким-то другим структурным способом).

(Я предполагаю, что шаблон {t _your_email}заполнит поле с помощью id="email". Если нет, используйте вместо этого класс.)

Обратите внимание, что если значение выбранного атрибута не соответствует правилам для идентификатора CSS (например, если в нем есть пробелы или квадратные скобки или оно начинается с цифры и т. Д.), Вам нужно заключить в кавычки стоимость:

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

Они могут быть одинарные или двойные кавычки .

Если содержимое является переменной, необходимо будет заключить его в кавычки. Это сработало для меня. Как это:

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