jquery - 如何防止 Bootstrap css 类覆盖我的自定义 css 类

Question

我的表单中有一些文本框具有 Bootstrap form-control 类。

media="screen"
.form-control {
    ...
    border: 1px solid #ccc;
    ...
}

如您所见，此类定义了那些文本框的边框。当其中一个文本框的内容无效时，我使用 jQuery 添加了一个名为 form-error 的自定义类，用于更改此文本框的边框。

.form-error {
    border: 2px solid red;
}

但是，我的类被 form-control 类覆盖了。我不知道为什么，但可能是因为媒体查询(开发者工具在 form-control 类上方显示 media="screen")。

如何让我的 form-error 类覆盖 form-control 类？

Answer 1

如果这是一个特异性问题，你可以更具体并使用这样的东西:

form .form-group .form-error {
    border: 2px solid red;
}

jsFiddle example

请记住，样式表是级联的。这意味着它们是从上到下阅读的。您应该将 .form-error 的样式放在 .form-control 下，以防止它被覆盖。