如何防止bootstrap css类覆盖我的自定义css类

Question

我的表单中有一些文本框，其中包含引导程序form-control类。

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

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

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

然而，我的班级被form-control班级所压倒。我不知道原因，但可能是因为媒体查询（开发人员工具在media="screen"类上方显示form-control）。

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

Answer 1

如果这是一个特异性问题，你可能会更具体，并使用类似的东西：

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

jsFiddle example

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

Answer 2

另一个选择是在样式中添加“！important”。请检查。

例如。

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