在 CSS 属性中使用 !important 是不是很糟糕？答案

【问题标题】：Is it bad to use !important in a CSS property?在 CSS 属性中使用 !important 是不是很糟糕？
【发布时间】：2012-01-11 17:02:57
【问题描述】：

我对 CSS 知之甚少（我纯粹是 Java/J2EE 开发人员），但不知怎的，我遇到了一个我无法解决的 CSS 难题。

我正在使用一个带有 jQuery 灯箱效果的表单，它有一个 div 和一个 id 和一个 class：

<div id="contact-container"
     class="myclass"
     style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">

在我的 CSS 文件中，我使用了以下条目：

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
}

但是当这个表单显示为 jQuery 弹出窗口时，它在 Mozilla 中可以正常显示，但在 Google Chrome 和 IE 上，该框不能正常显示：只有部分显示，并且被滚动隐藏吧。

当我通过 firebug 看到它时（我第一次使用它 :)），它向我展示了以下内容：

<div id="contact-container"
     class="myclass" 
     style="position: fixed; z-index: 1002; height: 67px; width: 450px; left: 406.5px; top: 15%;">

对于相同的设置，IE 和 Mozilla 无法正常运行。经过大量谷歌搜索，我对我的CSS 进行了以下更改：

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
    height:380px !important;
}

我使用height:380px !important; 固定了高度，但对 CSS 了解不多，我不确定这是否是正确的方法，因为我搜索了高度但没有在任何地方定义。

如果我采用了错误的方法，请提出建议。

【问题讨论】：

!important 只能作为最后的手段使用。例如，如果周期性脚本内联样式导致问题，!important 很有用。

标签： html css

【解决方案1】：

!important 是一个有用的工具，但缺点是它是一种不得已的工具。所以你不想过度使用它，因为你最终会给维护网站的任何人带来麻烦。

但是，您的示例是典型用途。发生的事情是 JS 正在动态注入内联样式属性。因此，这覆盖了 CSS 中的级联。 !important 允许你覆盖它。

【讨论】：

【解决方案2】：

!important is valid CSS syntax 并且使用它没有任何问题 - 只要您了解它在做什么以及它为什么解决您的问题，以便您以正确的方式使用它。

CSS 代表 Cascading 样式表。您可以使用单个 CSS 文件和跨多个 CSS 文件为相同的选择器加载多个相互叠加的样式。 CSS 文件中后面的规则优先于前面的规则，后面的 CSS 文件中的规则优先于早期文件中的规则。这就是级联。

您可以将!important 视为将特定规则移动到位于其他规则之上的特殊层中——仍然受级联影响，但它只会被同样标记为!important 的后续规则覆盖。这使您可以将希望优先更早的规则放置在符合逻辑的级联中。最明显的例子是确保硬编码样式表中的规则仍然优先于在加载时由 javascript 动态插入的规则......这正是您在这里所做的。适当使用。

当然，可能还有另一种方法可以解决您的问题，例如使用更具体的选择器来定位属性。但是，在某些情况下，更改可用的选择器不足以启用此功能，并且更改生成的 html 以添加其他选择器可能过度（例如，它是由不允许的内容管理系统动态生成的标记轻松定制 html 的那部分）。在这种情况下，使用!important 可能更方便、更实用，并且在这种情况下比其他方法更容易维护。

【讨论】：

完美的答案和很好的解释

【解决方案3】：

在我看来，这绝对是不好的做法。

维护一个散布有!important 的网站是一场噩梦。如果你觉得你需要使用!important，那对我来说就是你需要更新你的CSS specificity。

他们被称为级联是有原因的:)

【讨论】：

【解决方案4】：

使用 !important for development 快速识别级联中的问题，然后解决问题。最好在 CSS 规则中使用最少的 specificity 来让某些东西正常工作。无论如何，在投入生产之前消除 !important 规则问题。

【讨论】：

使用您的具体建议，我所要做的就是将我的选择器从 .myClass 更改为 input[type="button"].myClass。

【解决方案5】：

如果你使用 !important，它在元素上的优先级最高。但是请注意，如果您在同一个元素上使用两次相同的功能（如背景颜色或颜色），那么最后一个将是最高的。请注意使用两次 !important（意味着不要这样做）：

 <div id="contact-container" class="myclass" style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">


#contact-container {width:450px !important;}
.myclass {width:500px !important;}

在这种情况下，您的解决方案是完美的，绝对足够了。

【讨论】：