如何防止引导 css 类覆盖我的自定义 css 类答案

【问题标题】：How to prevent bootstrap css class to override my custom css class如何防止引导 css 类覆盖我的自定义 css 类
【发布时间】：2013-12-28 21:58:32
【问题描述】：

我的表单中有一些文本框具有引导程序 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 类？

【问题讨论】：

【解决方案1】：

如果这是一个具体问题，您可以更具体并使用以下内容：

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

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

【讨论】：

通过在我的班级名称之前添加表单来更具体！但我测试了在 bootstrap.min 之后导入我的自定义 css，它也成功了！ 1 个问题 2 个解决方案，太棒了！

【解决方案2】：

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

例如。 .

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

【讨论】：