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

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 对象没有边框。所以我 delcare a

.img-thumbnail {

}

我想对 CSS 说以下字段(在 **bootstrap.css 中设置)不能存在于覆盖文件中(所以我没有边框)

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

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

我试着用一个特定的值覆盖它，但我可以用一个新的颜色值覆盖 background-color(并且它有效)但是当我尝试更改 border 值到 0px 它仍然使用 bootstrap.css 定义

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

谢谢

安德里亚

Answer 1

基本上，CSS 引擎将根据 3 件事决定使用哪个规则(此处按重要性顺序列出):

1. !important 子句
2. 更具体的规则
3. 规则顺序

现在，check out this fiddle .

---

首先，让我们谈谈顺序。我们有:

div { background:green; }

和

div { background:gray; }

那么，背景 CSS 将使用什么？ 绿色 还是灰色？它们都是没有 !important 子句的规则，并且具有相同的规范级别(都适用于 div)，只剩下 order 来决定.在这种情况下，gray 排在最后，因此它将应用于所有 div 元素。

---

现在，规则的“特殊性”。

#div1 { background: red; }

与其他仅适用于 div 元素的规则相比，这条规则更具体。所以即使 div{ background: gray; #div1 也会有红色背景 稍后推出。

---

最后但同样重要的是 !important。

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

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

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

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

---

既然您已经了解了所有这些，接下来就是检查元素以了解发生了什么，然后猜测您需要“多少功率”才能覆盖该规则。