在没有CSS冲突的情况下将HTML注入另一个页面

我正在使用Javascript将一些样式化的HTML注入另一个网页（已经爬网），并且我正在尝试以一种最小化与目标页面的CSS样式冲突的方式来完成。我正在注入一个固定位置

，它干净地漂浮在目标页面的顶部

到目前为止，我采用的方法是创建一个唯一的CSS id（一种名称空间），它首先重置所有可以想象的样式，然后应用自己的样式：

/* reset */
#my-div {display: block; visibility: visible; margin: 0; padding: 0; ... etc}
/* my styles */
#my-div {margin: 10px 5px; ... etc}

但是，

包含文本、链接和图像，因此我不得不对其中的所有内容执行此操作，并生成大量CSS代码。这是因为目标页面自己的样式将以其他方式通过，并影响我的注入HTML

我可以做到这一点。。。但我想知道是否有人知道一种更聪明/更简单的方法可以保护我的HTML/CSS不受目标页面的影响

---

提前感谢您的建议。

最简单的方法是使用iframe，这样iframe和页面的样式都不会相互影响。然而，覆盖将更加棘手

除了使用iframe之外，唯一地命名类和id似乎是最好的方法。我真的看不到其他解决办法。我看到一些人做的是在任何css之前加上一个带破折号的短名称空间，即“twc topnav”。

据我所知，没有。是的，恐怕这次必须直接进入页面。我做不到。