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

Question

HTML:

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

CSS:

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

Я хочу создать новый CSS для ярлыка электронной почты, поскольку он не должен быть таким широким.

Answer 1

Селектор будет 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, вам придется использовать класс (ну, или каким-то другим структурным способом). </p>

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

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

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

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