Question

HTML

<label for="email">Email</label>
<input type="text" name="email"></input>

电子邮件class元素的input属性可能会更改，就像用户输入的电子邮件格式无效一样。我只希望label在input获取“无效”类时变为红色。

事实上，我希望所有带有for属性的标签对其指定的input元素“无效”。

CSS尝试：

label[for=*.invalid]{
     color: red;
}

以上内容可能不正确，因为我可能需要按名称指定特定的表单元素。

Answer 1

如果要向input元素（.invalid）添加动态类，为什么不向label元素添加类？当输入验证失败时，这将简化标签的样式。

据我所知，将标签颜色更改为红色会突出显示用户的错误。在此选项中，您仍然会向用户突出显示错误，但方式略有不同。 CSS :valid和:invalid伪类表示验证或无法验证的form和input元素。这些伪类对input而不是label进行了设定。

此选项涉及兄弟和属性选择器。您必须撤消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更改元素的视觉顺序。因此，如果您不想在label之后放置input以便出现，则可以轻松解决此问题：将input和label包裹在Flexbox中并使用order property来安排他们的展示顺序。

一些附注......

HTML5提供input type="email"‌，您可能需要考虑而不是type="text"。一个好处是，当移动设备看到type="email"时，他们经常会启动一个电子邮件友好的键盘。
其次，input元素是void element。无需关闭标签。您可以安全地删除</input>。
最后，for属性将label元素与匹配的ID相关联。在您的代码中，您需要将id="email"添加到input，才能使标签点击功能生效。

Answer 2

firstArray.sort({ (a, b) -> Bool in a.earlierDate(b) == a })属性必须与关联输入的for（不是id，而不是name）匹配。

要根据您需要的class功能更改label：

时，这是不可能的
使用JavaScript修改input（例如，通过添加课程）。