html - 如何阻止注入(inject)的 HTML-div/CSS 继承样式？ (IE浏览器)

Question

我正在为 Internet Explorer 创建一个扩展，我在网页上注入(inject) CSS 样式的 span 标签。如果单击此组件的特定部分，将显示一个弹出窗口。

这个弹出窗口实际上是一个“DIV”元素，我在内容页面的最后注入(inject):“BODY”标签。我在这个 div 中有一个 CSS 样式的表格，根据我所在的站点，此弹出窗口的外观要么符合规范(关于宽度等)，要么不符合规范。

我对 CSS 之类的知识了解不多，但这可能是因为“父”页面已经有一些用于“BODY”、“DIV”或“TABLE”元素的 CSS被我的元素继承？

如果是这种情况，有什么办法可以阻止这种情况吗？

Answer 1

(至少)有两种方法可以做到这一点¹，但它们都有点困惑。

使用带有自己的 css 的 iframe(这样页面就被两个完全不同的网页分开了)。

使用更高的特异性来定位插入的 html 元素。

body {
  /* targets the 'body', and these styles are inherited by its descendant elements */
}

body div {
  /* targets all divs that are contained within the 'body' element */
}

body > div {
  /* targets only divs that are directly contained within the body element */
  /* and these styles will/may be inherited by the children of these divs */
}

后一种方法的问题在于，您必须明确指定几乎所有可能的排列。而且总会有未考虑的边缘情况。您最好使用类名来指定新内容的样式:

.insertedDiv {
  /* this will apply to all elements of class 'insertedDiv', but may be overridden */
  /* by a more specific id-based selector such as '#container > .insertedDiv' */

---

1. 但我目前只能想到这两个。