CSS 选择器 - 如何在 CSS 中选择“for”？答案

【问题标题】：CSS selectors - how to select 'for' in CSS?CSS 选择器 - 如何在 CSS 中选择“for”？
【发布时间】：2021-02-20 19:44:09
【问题描述】：

我正在使用 jQuery 验证。

当 for 现在有效时，验证器正在创建这些：

<label class="error" for="username" generated="true">

由于所有标签都具有相同的 class=error，我可以根据 'for' 使用 CSS 选择这个确切的标签吗？

我知道如何用 jQuery 来解决这个问题——但总是在寻找最干净、最纯粹的方式。任何建议都非常感谢。

皮特

【问题讨论】：

如果您正在制作独特的标签元素，是否适合在每个标签上附加一些独特的 id 以供 jquery 选择？
@john - 'inputs' 确实有唯一的 ID - 但 jQuery Validator 不会将它们复制过来 - 我可以通过 jQUery 调用它们（带有 ID 的输入），而不是找到下一个元素并向其添加类（另一个用类错误标记的独特类）-但这不是我问题的重点。我正在寻找纯 CSS 解决方案。
@jAndy - 这是内部项目 - 只有 Chrome 和只有我。
stackoverflow.com/questions/2599627/… 的副本

【解决方案1】：

使用 (CSS2) attribute selector:

.error[for="username"]

这适用于 IE8+ 和所有现代浏览器。

IE7 的属性选择器有问题：as explained here，要匹配for，您必须使用htmlFor。

所以，如果您需要 IE7 支持，请使用：

.error[for="username"], .error[htmlFor="username"]

【讨论】：

只要确保我理解那个 URL 引用想要表达的意思——事实上“for”是一个让 IE7 失败的关键字，对吗？如果您使用 .error[foo='bar'] 之类的东西，它会按预期匹配
？

【解决方案2】：

可以使用[] 表示法通过 CSS 或 jQuery 选择任何属性。 CSS 适用于任何类似 XML 的语法，而不仅仅是 HTML——它不知道（或关心）哪些属性是“有效的”，只要结构格式正确。

.error[for='username'] {

}

或“以”开头

.error[for^='userprefix'] {

}

【讨论】：

【解决方案3】：

在css中：

.error[for=username] {
}

在 jQuery 中

$('.error[for=username]')

【讨论】：