Question

我正在编写一个jQuery脚本，通过对它们应用流畅的网格系统来帮助使旧站点响应。

除了一些事情之外，它们都运作良好。首先，在页面的末尾调用插件和样式表，因此CSS样式应该覆盖页面上的任何其他内容。但是（我认为这是由于特殊性）当我有：

<div id="header" class="span4">

#header {
float: right;
width: 960px;
margin-left: -5em;
}

[class*="span"] {
display: block;
float: left;
width: 100%;
margin-left: 2.564102564102564%;
}

#header样式优先，即使CSS中的.span样式较低。我知道它通常被认为是糟糕的形式，但是从我的插件样式表中为每个样式添加!important的最佳/唯一方法是解决这个问题吗？它们很重要，使用插件的重点是覆盖当前的样式表，但我想知道是否有更好的方法。

Answer 1

一个不完美的解决方案是将body标签的内部html包含2-4个具有不同id的div，以便流体css文件中的css更具体：

HTML：

<html>
    <body>
        <div id="wrapper_1">
            <div id="wrapper_2">
                <div id="wrapper_3">
                    <div id="header" class="span4">
                        This is set as red by the main css file, but is rendered as blue, because the fluid css file has more specific declarations.
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS：

/* MAIN CSS FILE */
#header {
color: red;
}

/* END MAIN CSS FILE */

/* FLUID CSS FILE */
#wrapper_1 #wrapper_2 #wrapper_3 [class*="span"] {
color: blue;
}

/* END FLUID CSS FILE */

以下是演示：http://jsfiddle.net/j5gt7/

有关详情，请阅读http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

这个解决方案并不完美，因为该元素可能具有内联样式，或者主css可能具有超过2-4个ID的选择器，这些ID将覆盖流体css（或使用！important设置的规则）。

CSS - 最后调用的样式表不会覆盖/重要

1 个答案: