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

【问题标题】：Some questions about CSS rules priority关于 CSS 规则优先级的一些问题
【发布时间】：2014-02-05 21:57:07
【问题描述】：

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

现在我有以下情况，在 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;

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

我尝试用一个特定的值覆盖它，但我可以用一个新的颜色值覆盖 background-color（它可以工作）但是当我尝试改变 border strong> 值为 0px 它仍然使用 bootstrap.css 定义

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

Tnx

安德烈亚

【问题讨论】：

边框：0 无；不工作？已编辑：!important;
为了澄清，它应该是边框：0 或边框：无 - 不是两者。如果您同时使用两者，它仍然可以工作，但那是因为 css 使用的是最后一个，而第一个是多余的。这将对高流量网站的性能产生负面影响。此外，如果您必须覆盖无法删除的内联样式，您应该只使用 !important。这就是创建 !important 的目的，而不是这样的情况。

标签： html css user-interface

【解决方案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。

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

【讨论】：

【解决方案2】：

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

【讨论】：