1

我正在编写一个 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从我的插件样式表中添加到每个样式中？它们很重要，使用插件的全部意义在于覆盖您当前的样式表，但我想知道是否有更好的方法。

4

1 回答 1

2

一个不完美的解决方案是用 2-4 个具有不同 id 的 div 包装 body 标签的内部 html，以便流体 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 的选择器，这将覆盖流体 css（或使用 !important 设置的规则）。

于 2013-01-23T22:50:41.650 回答