埋め込みスクリプトのCSSをリセットする

Question

私は自分のサイトにウェブマスターが埋め込んでいるJSアプリを開発中です。特定の機能を持つサイトに固定要素を追加するだけでなく、ページのheadにCSSがある<style>タグを追加してスタイルを設定します。その面ではwibiyaとかなり似ています。

私はトラブルこの要件のための正しいCSSルールを見つけることがあります。

• 私のスタイルは、ページのスタイルは
• 私のスタイル私のスタイルが過負荷にならないページに
• の要素のスタイルを過負荷にならないだろうページが何かを宣言してもまだ手があるべきです。important!

私はCSSをDOMに挿入していますが、私のスタイルが最後にページに挿入されます。

私はページ内の要素を編集していません。私はコンテナを持っており、すべての要素はそのコンテナ内にあります。

私はMeyer's CSS Resetをコンテナとその中のすべてのオブジェクトに対して具体的に試みましたが、サイトルールは私のルールよりも優先されます。

私はこれにどのようにアプローチしますか？

Answer 1

あなたはあなたの "モジュール"をスタイルするためのスタイルシートを持っていますか？いくつかのヒントがあります：

1. CSSを最後に読み込むスタイルをオーバーライドします。通常は、jQuery UIが自分のスタイルでオーバーライドされないように、CSSを最後にロードして安全性を確保します。

2. スタイル重要度順（私が覚えている限りでは）この順序である：

   1. ブラウザのスタイル
   2. スタイルシートのスタイル
   3. インラインスタイル
   4. !importantスタイル
   5. ユーザー定義済み/ユーザースクリプトスタイル（カスタムブラウザのフォントと色）。

   jQueryのようなライブラリは、スタイルシートのスタイルを特定性にかかわらず常にオーバーライドするため、インラインスタイル（addClassメソッドとは対照的）を適用する理由です。 !important

3. Know specificityを使用してオーバーライドできます。これは、jQuery UIスタイルシートが非常に長い/特定のスタイル宣言を持つ理由でもあります。より具体的であれば、オーバーライドするのが難しくなります。証明するために、次のことが常に赤の定義はそれの後に来る場合でも緑になります。

demo：

<span class="red">I'm supposed to be red</span>​ 

span.red{color:green} 
.red{color:red} 

Answer 2

ルールよりも具体的にする必要があります。例えばHere's an article on the subject!

、次のように彼らのルールがある場合：

.button { background: red; } 

あなたはより限定的である場合：

a.button {} 
body .button {} 

あなたの規則が勝ちます。

---

埋め込みページに重要なルールが使用されている場合は、より具体的な重要なルールを使用する必要があります。しかし、あなたとスクリプトの間でルール戦争を開始しないようにしてください。結果は通常予想外です！