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


256

HTML:

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

CSS:

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

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

Ответы:


496

Селектор был бы 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... */
}

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


Затем я изменю его на класс для ie7, используя комментарии условия, спасибо за отличный ответ!
Кайл

А теперь в документах jQuery говорится, что вам не нужны кавычки для отдельных слов, поэтому он снова соответствует CSS (в этом отношении).
TJ Crowder

6
Во избежание путаницы со всеми (у меня это было только у меня), не должно быть пробела между labeland[for=email]
paddotk

IE8 поддерживает селекторы атрибутов, пока на странице объявлено <! DOCTYPE>.
ilinamorato

1
@TJCrowder я понимаю. Я только прояснил этот момент, поскольку я только что проверил это.
ilinamorato

0

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

itemSelected (id: number) {
    console.log ('label contains', document.querySelector ("label [for = '" + id + "']"));
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.