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

【问题标题】：Injecting HTML into another page without CSS conflicts在没有 CSS 冲突的情况下将 HTML 注入另一个页面
【发布时间】：2011-10-08 18:10:00
【问题描述】：

我正在使用 Javascript 将一些风格化的 HTML 注入另一个网页（已被抓取），并且我试图以一种最大限度地减少与目标页面的 CSS 样式冲突的方式来执行此操作。我正在注入一个固定位置的<div>，它干净地漂浮在目标页面的顶部。

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

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

但是，<div> 包含文本、链接、图像，所以我不得不对其中的所有内容执行此操作并生成大量 CSS 代码。这是因为目标页面自己的样式会出现，否则会影响我注入的 HTML。

我可以这样做...但我想知道是否有人知道一种更智能/更简单的方法可以保护我的 HTML/CSS 免受目标页面的影响。

提前感谢您的任何想法。

【问题讨论】：

【解决方案1】：

最简单的方法是 iframe，这样 iframe 和页面的样式都不会相互影响。然而，叠加会比较棘手。

【讨论】：

【解决方案2】：

唯一命名您的类和 id 似乎是不使用 iframe 的最佳方法。我真的没有看到另一种解决方法。我看到有些人做的是在任何 css 之前放置一个带有破折号的缩短命名空间，即“twc-topnav”。

【讨论】：