如何在嵌入小部件中应用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来让你的选择器更具体 - 尽管这仍然不能保证你的选择器仍然是最具体的。这完全取决于原始网站上样式表的质量。