如何在没有外部css文件的情况下重置div中所有元素的所有css？

Question

我有一个小部件，它将弹出窗口注入不同的网站，作为一个绝对定位的div。

我希望弹出窗口看起来一样。但是，div中的段落和其他html元素受托管站点CSS的影响。

有没有办法在没有css文件的情况下以有效的方式重置div中元素的所有属性，而css文件必须考虑所有选项和元素类型？

注意：我需要一个干净的javascript / css / html解决方案，不能假设jQUery可用。

Answer 1

您可以做的最好的事情是使用iframe作为窗口小部件内容。没有办法仅使用CSS重置所有继承的CSS样式。

Answer 2

Short anwer：据我所知，没有。

答案很长：由于您不希望将当前文档的样式应用于绝对定位的<div>内的元素，因此最好的方法是使用<iframe>元素而不是{{ 1}}。

这样，弹出元素将在自己的文档中被隔离，并且将独立于当前文档的样式。如果您需要，<div>中的文档可能会有不同的<iframe>。

Answer 3

那么你可以随意用JS设置一些样式属性，但它将是一个很长的列表，它不会很漂亮或高效，而CSS的设计恰恰相反。您还可以使用一些ID特定的CSS选择器添加内联样式块，我猜!important标签，但同样不是很漂亮 - 保证ID很难/不可能。

基本上，如果它不是你的页面，你对它的控制是（正确的）幻想。