異なるHTMLドキュメント要素に同じルール名を持つ異なるCSSシートを使用する

Question

同じルール名を持つ複数のスタイルシートを読み込んで、ページの異なる要素に適用する方法が必要です。これは可能ですか？

ここに私がしたいことの例があります。私はおそらく（ページにそれらの両方をインポートできるようにしたいと思い

.size{ 
    color: #FF0000; 
    font-size: 14px; 
} 

：

style1.css：

.size{ 
    color: #FF6600; 
    font-size: 18px; 
} 

がstyle2.css下の2枚のスタイルシートを取りますいくつかの種類のID）、ある特定のdiv内のテキストをstyle1.cssの規則を使用するように設定し、別のdivはstyle2.cssの規則を使用する必要があります。

私のアプリケーションのユーザーがページ上の異なるウィジェットのカスタムスタイルシートをアップロードできるようにするためには、このようにする必要があります。シートが同じルール命名体系を使用するならば、このスキームは機能するはずです。

Answer 1

答えは、このようにはできません。最後にロードされたルールが優先されます。

あなたは異なるクラスやIDが異なるウィジェットを区別する必要があり、その後、あなたは同じルールがありません。

#widgetB .size{ 
     color: #FF0000; 
     font-size: 14px; 
} 

#widgetA .size{ 
     color: purple; 
     font-size: 10px; 
} 

Answer 2

最後にロードされたスタイルシートで宣言されたルールは、一致するすべての要素に適用されます。

Answer 3

たぶん、あなたは、デフォルトのページのCSSを削除して、基本的にはクライアント側でスタイルシートを交換し、ユーザースタイルシートでそれを置き換えるためにjQueryのようなものを使用することができます。

Answer 4

多分、あなたは各ウィジェットをiframe内に置くことができます。そのiframeでは、そのウィジェットのカスタムスタイルシートを呼び出します。そうすれば、より多くのモジュール性を獲得できるだけでなく、問題を回避するための詐欺を心配することなく、自分が望むものを直接行うことができます。

Answer 5

あなたの質問に直接答えるには、「いいえ」をクリックします。 CSSコード自体には何らかのコンテキストが必要です。

"自分のアプリケーションのユーザーがページ上の異なるウィジェットのカスタムスタイルシートをアップロードできるようにする" - 私がそれを読んでいるように、各ウィジェットを一意のIDなどでラップすることをお勧めします。

その後、ユーザーがコンテキストのビットとスタイルシートをアップロードすることができますが、静止画として同じ基本名、：

#widget-one .size { ... } 

#widget-two .size { ... } 

しかし、コンテキスト/プレフィックスのいくつかの種類が必要です。