用于选择的CSS id和用于样式的类

Question

我正在编写一个带有验证的表单，我想在未正确填充时突出显示文本框。我添加了这个CSS规则：

/*Styles for validation*/
.invalid {
  border: 1px solid #FF0000;
}

我的表单中的字段有ID，例如第一个字段的#f1，它没有CSS样式，但我使用它们来使用jQuery选择字段。所以，当我发现错误时，我说：

$('#f1').addClass("invalid");

根据Firefox的检查员，该元素现在具有样式＃f1.invalid，但是我没有看到任何无效的样式应用于该元素。我怎样才能得到我正在寻找的行为？谢谢！

编辑：我说谎，我的文字字段有一个内联样式，将宽度设置为5ems，但删除它似乎没有什么区别

Answer 1

匹配 id 的选择器比具有匹配类的选择器强。这意味着如果您为 id #f1的元素设置 border 规则，则不会应用该类的规则。为了使课程适用，你需要告诉它更重要;

.invalid {
  border: 1px solid #FF0000 !important;
}

Answer 2

原来我的CSS或HTML没有任何问题。我的FTP客户端没有将我的更改上传到.css文件。注意缓存的临时文件的危险！