1

CSS を<style></style>HTML のタグに直接配置すると、ロードされたファイル内のすべての CSS が切り捨てられます。

<link href="foo1.css"rel="stylesheet" type="text/css" />

しかし、HTML にインライン スタイルは必要ありません。そこで、css を foo2.css という名前のファイルに移動し、次のようにしました。

<link href="foo1.css"rel="stylesheet" type="text/css" /> 
<link href="foo2.css"rel="stylesheet" type="text/css" />

私も試しました：

<link href="foo2.css"rel="stylesheet" type="text/css" /> 
<link href="foo1.css"rel="stylesheet" type="text/css" />

順序を変更します。しかし、うまくいかないようです。foo2.css をインライン スタイルと同じように処理するようにブラウザに指示するにはどうすればよいですか?

4

4 に答える 4

3

使用しないでください!important

後で後悔するでしょう。代わりに、より強力なセレクターを使用してください。

.weakSelector { }
div.strongerSelector { }
#strongSelector { }
div#superStrongSelector { }
html > body > div.wrapper > div.content > section > article > p > a:link#superUltraMegaStrongSelector { }

同一のセレクターを使用する場合、強力なセレクターがドキュメントの後半に表示されます。

開発者ツール (ヒント:F12任意のブラウザーでヒット) を使用して、どのセレクターが勝っているかを確認し、セレクターを強化します。

IE の開発ツールの [Trace Styles] タブは、より強力なセレクターを特定するのに特に役立ちます。

IE 開発ツール

Chrome の開発ツールもスタイルの由来を示しますが、スクロールして探す必要がある場合もあります。

Chrome 開発ツール

もちろん、firebug ( HTML > Style > Show applied styles) はありますが、スクリーンショットはもうありません。;-)

于 2013-04-01T20:39:19.223 に答える
2

CSS ドキュメントのセミコロンの前に !important を置きます

div {
    width:100px !important;
}

これにより、インラインを含むすべての CSS がオーバーライドされます。

于 2013-04-01T20:31:53.463 に答える
1

!important最後の手段としてのみ使用してください。真の目標は、ブラウザが使用するスタイルを決定する方法であるため、foo2.css スタイルの特異性を高めることです。

コードを見ないと断言はできませんが、foo2.css 内のすべてのスタイルの前にプレフィックスを追加して、.containerクラスがある場合、または一貫したコンテナーがない場合は、すべてのスタイルにプレフィックスを付けることができますbody。それらは foo1.css スタイルよりも具体的であるため、それらを使用する必要があります。

!important や一般的なプレフィックスを使用することは、新しいサイトを構築するための最良の方法ではありませんが、それがインライン スタイルを削除する最も簡単な方法である場合、ブラウザがスタイルをキャッシュできるようにしながら、メンテナンス性を大幅に向上させるというトレードオフの価値があります。

于 2013-04-01T20:44:17.277 に答える