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

Question

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

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

我表单中的字段有 ID，例如#f1第一个字段，它没有 CSS 样式，但我使用它们来使用 jQuery 选择字段。因此，当我检测到错误时，我会说：

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

结果证明我的 CSS 或 HTML 没有任何问题。我的 FTP 客户端没有将我的更改上传到 .css 文件。当心缓存临时文件的危险！

2 回答 2