如何在嵌入小部件中應用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來讓你的選擇器更具體 - 儘管這仍然不能保證你的選擇器仍然是最具體的。這完全取決於原始網站上樣式表的質量。