如何从继承样式中停止注入HTML-div/CSS？(IE浏览器)

Question

我正在为Internet Explorer创建一个扩展,我在网页上注入CSS样式的span标记.如果单击此组件的特定部分,则会显示一个弹出窗口.

这个弹出窗口实际上是一个"DIV"元素,我在内容页面的最后注入:s"BODY"-tag.我在这个div中有一个CSS样式的表,根据我所在的网站,这个弹出窗口的外观要么是根据规格(关于宽度等等),要么不是.

关于CSS等我没有那么多的知识,但这可能是因为"父"页面已经有一些CSS用于"BODY","DIV"或"TABLE" - 正在继承的元素我的元素？

如果是这种情况,有没有办法阻止这种情况？

Answer 1

有(至少)这样做的两种方法¹,但他们都有点凌乱.

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

使用增加的特异性来定位插入的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. 但我现在只能想到这两个.