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