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