如何根据输入元素的动态 class 定位标签元素？
How to target label element based on input element's dynamic class?
HTML
<label for="email">Email</label>
<input type="text" name="email"></input>
电子邮件 input 元素的 class 属性可能会更改，就像用户输入无效的电子邮件格式一样。我只希望 label 在 input 获得 class "invalid".
时变为红色
事实上，我希望所有具有 for 属性的标签都是其分配的 input 元素的 "invalid aware"。
CSS 尝试：
label[for=*.invalid]{
color: red;
}
以上可能不正确，因为我可能必须按名称指定特定的表单元素。
for 属性必须匹配关联输入的 id（不是 name，不是 class）。
为了根据 input 的功能更改 label，您需要：
- 使用组合符在两个元素之间建立联系（当
label在input之前时这是不可能的）或
- 使用JavaScript修改
label（例如添加class）。
选项 1
如果要将动态 class 添加到 input 元素 (.invalid)，为什么不将 class 添加到 label 元素，还有？当输入验证失败时，这将简化标签的样式。
选项 2
我了解将标签颜色更改为红色会向用户突出显示错误。在此选项中，您仍然向用户突出显示错误，但方式略有不同。 CSS :valid and :invalid pseudo-classes 表示验证或验证失败的 form 和 input 元素。这些伪 classes 样式 input 而不是 label.
选项 3
这个选项涉及兄弟和属性选择器。您必须在 HTML 中颠倒 label 和 input 的顺序（但这不必更改屏幕上的外观；见下文）。
HTML
<input type="text" name="email" class="invalid"></input>
<label for="email">Email</label>
CSS
input[class="invalid"] + label { color: red; }
使用 CSS Flexbox
更改元素的视觉顺序
尽管 DOM 中的元素顺序不同，您仍然可以更改 CSS Flexbox. So if you didn't want to put the label after the input for the sake of appearance there's an easy workaround: Wrap the input and label in a flexbox and use the order property 元素的 视觉顺序 以安排它们的显示顺序。
一些旁注...
HTML5 提供了一个 input type="email"，您可能要考虑用它代替 type="text"。一个好处是，当移动设备看到 type="email" 时，它们通常会启动电子邮件友好键盘。
其次，input元素是一个void element。不需要结束标签。您可以安全地删除 </input>.
最后，for 属性将 label 元素与匹配的 ID 相关联。在您的代码中，您需要将 id="email" 添加到 input 才能使标签点击功能正常工作。
HTML
<label for="email">Email</label>
<input type="text" name="email"></input>
电子邮件 input 元素的 class 属性可能会更改，就像用户输入无效的电子邮件格式一样。我只希望 label 在 input 获得 class "invalid".
事实上，我希望所有具有 for 属性的标签都是其分配的 input 元素的 "invalid aware"。
CSS 尝试：
label[for=*.invalid]{
color: red;
}
以上可能不正确，因为我可能必须按名称指定特定的表单元素。
for 属性必须匹配关联输入的 id（不是 name，不是 class）。
为了根据 input 的功能更改 label，您需要：
- 使用组合符在两个元素之间建立联系（当
label在input之前时这是不可能的）或 - 使用JavaScript修改
label（例如添加class）。
选项 1
如果要将动态 class 添加到 input 元素 (.invalid)，为什么不将 class 添加到 label 元素，还有？当输入验证失败时，这将简化标签的样式。
选项 2
我了解将标签颜色更改为红色会向用户突出显示错误。在此选项中，您仍然向用户突出显示错误，但方式略有不同。 CSS :valid and :invalid pseudo-classes 表示验证或验证失败的 form 和 input 元素。这些伪 classes 样式 input 而不是 label.
选项 3
这个选项涉及兄弟和属性选择器。您必须在 HTML 中颠倒 label 和 input 的顺序（但这不必更改屏幕上的外观；见下文）。
HTML
<input type="text" name="email" class="invalid"></input>
<label for="email">Email</label>
CSS
input[class="invalid"] + label { color: red; }
使用 CSS Flexbox
更改元素的视觉顺序尽管 DOM 中的元素顺序不同，您仍然可以更改 CSS Flexbox. So if you didn't want to put the label after the input for the sake of appearance there's an easy workaround: Wrap the input and label in a flexbox and use the order property 元素的 视觉顺序 以安排它们的显示顺序。
一些旁注...
HTML5 提供了一个
inputtype="email"，您可能要考虑用它代替type="text"。一个好处是，当移动设备看到type="email"时，它们通常会启动电子邮件友好键盘。其次，
input元素是一个void element。不需要结束标签。您可以安全地删除</input>.最后，
for属性将label元素与匹配的ID相关联。在您的代码中，您需要将id="email"添加到input才能使标签点击功能正常工作。