埋め込みウィジェットにCSSスタイルを適用するには

Question

私が所有していないサイトのウィジェットを作成します。

HTMLを注入した後、私はウィジェットのスタイルを次の手順を実行します。

var style = document.createElement('style'), 
    stylesString = 'minified css with a prefix for each selector eg. .my-prefix p {... }', 
    rules = document.createTextNode(stylesString); 

style.type = 'text/css'; 
if(style.styleSheet) { 
    style.styleSheet.cssText = rules.nodeValue; 
} else { 
    style.appendChild(rules); 
} 
document.getElementsByTagName('head')[0].appendChild(style); 

しかし、私のスタイルは上書きされているいくつかのサイトに

。

スタイルをより正確に適用する方法はありますか？

私が使用して（できない）したくない

：

• のiFrame
• すべてのプロパティに関する重要な

Answer 1

これが最も可能性の高いいずれかの持つ問題の要素によって引き起こされます！ （現在のスタイルの追加方法を使用する場合は、!importantを使用してオーバーライドする必要があります）、またはより高いスタイルのスタイルを持つselector precedenceを使用する必要があります。

セレクタをより具体的にするには、少なくともidを追加することをお勧めします。これはセレクタが依然として最も具体的であることを保証するものではありません。元のサイトのスタイルシートの品質に完全にはまっています。