我的警告标签未显示在无效输入上

Question

我不想使用JQuery（还），所以我正在尝试寻找替代解决方案。 我写了一个带有工作验证功能的from。现在我想添加一个编辑标签的函数，以便在无效输入上显示。我的css代码是这样的：

#invalidInputHidden{
    display:none;
    color:#FF0000;
}
.error{
    display:block;
}

首先隐藏警报文本。在我的JavaScript中，我在标签上添加了一个类，它应该使它再次可见。我把它放在验证函数中：

invalidInputHidden.className += " error";

但这不会发生。是因为id优先于某个类，所以它总是有“display：none;” ？

Answer 1

  

“是因为id优先于某个类”

是的。

  

“......所以它总是有display:none;？”

好吧，不是总是。解决通常的特殊规则的一种方法是使用!important：

.error{
    display:block !important;
}

这通常不被认为是良好的做法，事实上我上面提供的MDN链接建议反对它，但我个人不介意你的.error类应该是最重要的风格规则适用时。