6

Web アプリ用の JavaScript UI ダイアログを作成しています。問題は、ユーザーが Web アプリ用の独自のテーマを作成できることです。これh1 {...}, div {...}には、UI ダイアログの CSS 書式設定を上書きする要素 CSS セレクター (など) が含まれる場合があります。ダイアログは、クラス セレクターでフォーマットされた div 要素です (このダイアログは複数回表示される可能性があるため、id は機能しません)。巨大な CSS リセット スタイルを使用せずに、!importantUI ダイアログのすべてのスタイルに使用することなく、UI ダイアログに影響を与えるユーザー テンプレート スタイルの要素セレクターを停止する方法はありますか? ダイアログボックスでjQuery UIスタイルのようなUIライブラリをどのように使用しますか?

たとえば、ユーザー テーマには次のものが含まれます。

input {color:nuts; height:bananas; width:crazy; background:morenuts; }

UI の css:

.ui_modal_wrap input {color:red; border:1px solid black;}

UI の html:

<div class="ui_modal_wrap>
<input type="text" name="#" />
</div>

問題は、.ui_modal_wrap に巨大な css レストを使用する必要があることです。これは、ユーザーが適用できるすべての属性を含む css を実際に記述できないためです (この例では、UI に含まれていないため、高さと幅の要素によってスタイルが崩れます)。高さと幅）。

4

3 に答える 3

12

一般に、ルールは（両方が外部スタイルシートにある場合）。を使用して適用されることを知っておく必要がありますspecificity rules。

一般的に考えられるスコアがあり、スコアが最も高い要素に適用されるルールが適用されます。

セレクターチェーンでは、各要素タイプは1の価値があり、クラスは10の価値があり、IDは100ポイントの価値があります。

body div.wrapper == 12 points

body div.wrapper div span == 14 points

body #quote == 101 points

したがって、通常は、ページ固有のルール（ページの残りの部分のスタイルを設定する）の具体性を低くし、UICSSに引き継がせます。または、次のように、UIマークアップをHTMLの「スーパー」ビット内にいつでも配置できます。

<div id="super">
    <div id="super2">
        //your UI stuff
    </div>
</div>

#super #super2次に、そのスタイルシートの各ルールの前に配置して、UIのCSSを「名前空間」にします。

于 2010-09-29T16:25:22.100 に答える
0

次の場合を除いて、これを保証する方法はありません。

  1. ユーザーのCSSをフィルタリングして、すべての！important宣言を削除できます
  2. あなたはあなたのcssコードが彼らの後に挿入されることが保証されています。次に、すべてに！importantを使用して、cssの特異性を高めることができます。

cssの特異性を読む

于 2010-09-29T16:25:44.573 に答える
0

より具体的なセレクターを使用するスタイルの2番目のセットが必要になります。これにより、ユーザーのスタイルによって設定された要素がオーバーライドされます。使用!importantは、これを行う1つの方法にすぎません。詳細については、 CSSの特異性を調べてください。

HTML

<div class="ui-dialog">
    <h1>Dialog Heading</h1>
</div>

CSS：

div.ui-dialog h1 {
    color: red;
}

jQuery UIは、テーマローラーを使用するときにCSSの「スコープ」を指定するオプションを提供することでこれを実装します。スコープをに設定してから.system-scope、HTMLですべてのUI要素をsystem-scopeのクラスを持つ要素にラップすることができます。

于 2010-09-29T16:25:52.100 に答える