css - 如何在嵌入小部件中应用 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如果您想使用当前添加样式的方法，您必须使用它们来覆盖），或者具有具有更高选择器优先级的样式。

我的建议是通过向它们添加至少一个来使您的选择器更加具体id——尽管这仍然不能保证您的选择器仍然是最具体的。这完全取决于原始站点上样式表的质量。