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

【问题标题】：How to select label for="XYZ" in CSS?如何在 CSS 中为“XYZ”选择标签？
【发布时间】：2011-02-05 16:15:06
【问题描述】：

HTML：

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

CSS：

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

我希望根据'for' 属性选择标签来进行布局更改。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果内容是变量，则需要用引号将其连接起来。它对我有用。像这样：

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

【讨论】：

【解决方案3】：

选择器将是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]");

这是一个attribute selector。请注意，某些浏览器（例如 IE

（我假设模板{t _your_email} 将使用id="email" 填充字段。如果不是，请改用类。）

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

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

【讨论】：

然后我将使用conditiona cmets将其更改为ie7的类，感谢您的出色回答！
现在 jQuery 文档说你不需要单个单词的引号，所以它再次匹配 CSS（在这方面）。
为了避免大家混淆（我自己也有这个），label和[for=email]之间不能有空格
@T.J.Crowder 我明白了。我只是在测试时澄清了这一点。
现代 JavaScript 更新：document.querySelector('label[for="email"]') 或 document.querySelectorAll('label[for="email"]')。