如何在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;
}

我想为电子邮件标签制作一个新的CSS，因为它并不意味着那么广泛。

Answer 1

选择器为label[for=email]，因此在CSS中：

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

...或使用DOM的JavaScript：

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

...或使用jQuery的JavaScript：

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

这是attribute selector。请注意，某些浏览器（例如IE＆lt; 8的版本）可能不支持属性选择器，但更新的浏览器支持属性选择器。为了支持像IE6和IE7这样的旧浏览器，你不得不使用一个类（好的，或者其他一些结构方式），遗憾的是。

（我假设模板{t _your_email}将填入id="email"字段。如果没有，请改用类。）

请注意，如果您选择的属性值不符合CSS identifier的规则（例如，如果其中包含空格或括号，或以数字开头等） ，你需要围绕价值的报价：

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

他们can be single or double quotes。

Answer 2

如果内容是变量，则必须用引号将其连接起来。它为我工作。像这样：

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

Answer 3

如果label 立即紧跟指定的input元素：

input#example + label { ... }
input:checked + label { ... }