用于选择的 CSS id 和用于样式的类 [关闭]答案

【问题标题】：CSS id for selection and class for style [closed]用于选择的 CSS id 和用于样式的类 [关闭]
【发布时间】：2012-11-28 22:31:27
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

我没有为 F1 id 设置边框的规则，就像我说的那样，除了文本框的内置再现之外，没有关联的样式。 !important 不起作用
@Nick .. 你能为你正在谈论的场景创建一个小提琴吗.. 也可以使用 !important 作为最后的手段..
如果问题是特异性，重新组织你的css，使用类而不是id，在使用!important之前做一切。
!important 是 CSS 的一个经常被误解的方面（很像 z-index；如果我为每个 z-index: one bajillion 有一个镍币，那绝对没有任何作用......但我离题了）。正如 elclanrs 建议的那样，您不应该使用 !important，而应该使用更具体的规则。我是 Darth Vader CSS specificity 指南的忠实粉丝，因为它确实使主题易于理解。签出：stuffandnonsense.co.uk/archives/css_specificity_wars.html

【解决方案2】：

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

【讨论】：