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

Question

HTML：

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

CSS：

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

我希望基于“ for”属性选择标签以进行布局更改。

Answer 1

选择器将是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... */
}