Question

我有以下CSS问题：网站首先导入名为 bootstrap.css 的CSS样式文件（BootStrap框架CSS设置），然后导入另一个名为 my-的CSS文件custom-style.css 覆盖了一些 bootstrap.css 设置（因此我可以创建一些自定义设置，保持 bootstrap.css 文件不变）

现在我有以下情况，在 bootstrap.css 文件中，我有这个属性要覆盖：

.img-thumbnail {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    display: inline-block;
    height: auto;
    line-height: 1.42857;
    max-width: 100%;
    padding: 4px;
    transition: all 0.2s ease-in-out 0s;
}

现在我必须在 my-custom-style.css 文件中覆盖它，使 .img-thumbnail 对象没有边框。所以我去了一个

.img-thumbnail {

}

我想对CSS说下面的字段（在** bootstrap.css中设置）必须不存在于覆盖文件中（所以我没有边框）

    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    height: auto;

我可以做这样的事情，还是让我用特定值覆盖它？

我试图用特定值覆盖它但我可以用新颜色值覆盖背景颜色（并且它可以工作）但是当我尝试更改边框值 0px 它仍然使用 bootstrap.css 定义

你可以帮我解决这个问题吗？我认为存在一种优雅的方式来简单地说：“不要使用覆盖的文件设置而不用新值明确覆盖它

TNX

安德烈

Answer 1

基本上，CSS引擎将根据3件事情决定使用哪条规则（按重要性顺序列出）：

!important条款
更具体的规则
规则订单

现在，check out this fiddle。

首先，我们来谈谈订单。我们有：

div { background:green; }

和

div { background:gray; }

那么，CSS将使用哪个背景？ green或gray？它们都是没有!important子句的规则，并且具有相同的规范级别（两者都适用于div）仅保留顺序来决定。在这种情况下，gray排在最后，因此它将应用于所有div元素。

现在，规则的“具体性”。

#div1 { background: red; }

这个规则比仅适用于div元素的其他规则更强更具体规则。因此#div1即使后来有div{ background: gray; }，也会有红色背景。

最后，但并非最不重要!important。

这些规则是...... 重要。它们只能被后来出现的具有相同特定级别的另一个!important规则覆盖。

即使在较低级别的规范中声明!important规则，也不会覆盖它。喜欢在：

div { width:50px !important; }
#div2 { border:3px solid blue; width: 100px; }

即使稍后更具体，width: 100px;也不会应用于#div2。

现在您已经了解了所有这些，这是检查元素以查看正在发生的事情，然后猜测您需要覆盖该规则的“多少功率”。

Answer 2

是的，只需在您自己的css文件中覆盖该类，并在末尾添加！important

关于CSS的一些问题规则优先

2 个答案: