Question

对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没有正确使用，所以经过大量的Goggling后我对css进行了更改

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

我用height:380px !important;

修正了高度

虽然这解决了我的问题但不知道CSS我不确定这是否是正确的方法，因为我搜索了高度，但它没有在任何地方定义。

请建议我采用了错误的方法

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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

维护一个散布着!important的网站是一场噩梦。如果您认为需要使用!important，那么对我说的是您需要了解CSS specificity。

他们被称为Cascading是有原因的：）

Answer 4

使用！important进行开发以快速识别级联中的问题，然后解决问题。最好在CSS规则中使用最少量的specificity来使某些东西起作用。无论如何，在投入生产之前，请删除！imporant规则问题。

Answer 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;}

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

使用不好！在css属性中很重要

5 个答案: