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

CSS ではスタイルが低く#headerても、スタイルが優先されます。.span一般的に悪い形と見なされていることは知ってい!importantますが、プラグインのスタイルシートから各スタイルに追加するために、これに対抗する最良/唯一の方法はありますか? それらは重要であり、プラグインを使用することの要点は現在のスタイルシートをオーバーライドすることですが、もっと良い方法があるかどうか疑問に思っています.

4

1 に答える 1

2

不完全な解決策は、body タグの内側の html を異なる ID を持つ 2 ～ 4 個の 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 に流動的な CSS (または !important で設定されたルール) をオーバーライドする 2 ～ 4 個を超える ID を持つセレクターが含まれている可能性があるためです。

于 2013-01-23T22:50:41.650 に答える