如何在CSS中为=“ XYZ”选择标签？

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... */
}

...或在使用DOM的JavaScript中：

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 +“']”）））;
}