我正在做一个元素，该元素在我无法控制的网页上注入(inject) JS+CSS+HTML。
我担心主机页面对我注入(inject)的代码进行样式设置 -- 我希望我的注入(inject)代码只遵循我的样式，而不是他们的样式。
目前我能想到的唯一方法是为容器明确指定每个可能的标签 <div>的类(使用预定义的、已知的浏览器默认值)并依赖于这些规则的继承来向下传播到我注入(inject)的 HTML 的其余部分。此 CSS 需要出现在页面的底部 <head>标签。
不过，我认为这不是最好的解决方案，我也不期待实现它。当然有更好的方法。
最佳答案
其他人提出了很好的方法来防止您的 CSS 影响页面，并确保您的 CSS 优先，但您似乎最关心页面的 CSS 对您的影响 - 即添加一种时髦的、意想不到的样式(比如让所有的 div 都有粉红色的背景)。
我能想到的防止它们的样式影响注入(inject)代码的唯一方法是将注入(inject)的内容沙箱化，比如在 iframe 中。否则，您需要定义的东西太多了——您必须定义每一种样式(padding、border、margin , background... 列表在“*”选择器(或者更好的是，“#yourid *”，所以你只需覆盖你自己的内容)，这样你就可以保证对你的 CSS 的绝对控制。
编辑:我意识到后一种解决方案不一定会太痛苦，如果您使用全选器将所有内容重置为基线:
#myid * {
somestyle1: default;
somestyle2: default;
...
}
我找到了 someone who has written up such a solution .如果您在页面上向下滚动足够远，就会看到它(来自 SuzyUK)。它看起来并不完整，但肯定是一个好的开始。
(我也很想知道是否有防止这种情况发生的好方法。我之前编写过 Greasemonkey 脚本，将代码注入(inject)页面，并且不得不编写 CSS 来覆盖页面的 CSS，但是在在那些情况下，我知道我的目标是谁，并且可以直接针对页面定制我的 CSS。)
关于javascript - 防止现有 CSS 样式注入(inject) HTML/CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/732748/