Javascript 防止现有CSS设置注入HTML/CSS的样式

我正在做一个项目，在我无法控制的网页上注入JS+CSS+HTML

我关心的是主机页对我的注入代码的样式化——我希望我的注入代码只服从我的样式化，而不是他们的样式化

目前，我能想到的唯一方法是显式地为容器

的类指定每个可能的标记（使用预定义的、已知的浏览器默认值），并依赖继承将这些规则传播到注入的HTML的其余部分。此CSS需要显示在页面的

标记的底部

---

不过，我认为这不是最好的解决方案，我也不期待实施它。当然还有更好的办法

您只需非常熟悉CSS选择器即可。也就是说，比主机页的CSS规则更具体。您可能还想添加一种全局CSS reset-modified，以便只重置HTML。我指的是将所有颜色、背景、字体、填充等重置为单一标准的东西。从那里你可以建立你自己的风格。

用一个专门分类的

包装你注入的HTML，例如

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

---

然后，在CSS中，在所有规则前面加上

。我的超级专用唯一包装器

，并在每个规则上使用。这将指示客户端浏览器将您的规则视为匹配的任何元素的最高规则，而不考虑可能针对它们的任何其他样式-即使您无法控制的其他规则更为具体。

为什么不将html元素注入如下内联格式：

<p style="color:red">This to be injected</p>

这是要注入的

内联样式优先于任何其他规则，并且您已经在创建标记以插入它

---

另一个解决方案是在元素上使用非常特定的DOM id，然后在添加的CSS上设置它们的样式。其他人建议了非常好的方法来防止CSS影响页面的样式，并确保CSS优先，但您似乎最关心的是页面的CSS影响您-也就是说，添加一个时髦、出人意料的风格（比如让所有的div都有粉色背景）

我能想到的防止它们的样式影响注入代码的唯一方法是对注入的代码进行沙箱处理，就像在

iframe

中一样。否则，您需要定义的东西太多了-您必须定义“

*

”选择器上的每一种样式（

填充

，

边框

，

边距

，

背景

…这个列表会一直持续下去）（或者更好的方法是，

\yourid*

”，这样您就可以覆盖自己的内容了），这样你就可以保证绝对控制你的CSS

编辑：我意识到，如果您使用omni选择器将所有内容重置为基线，则后一种解决方案不一定太痛苦：

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}

我找到了。如果你在页面上向下滚动足够远，你会看到它（来自Suzuk）。它看起来并不完整，但肯定是一个好的开始

---

（我也很想知道是否有好的方法可以防止这种情况发生。我以前写过Greasemonkey脚本，将代码注入页面，并且必须编写CSS来覆盖页面的CSS，但在这种情况下，我知道我的目标是谁，可以直接针对页面定制CSS。）

如果您使用的是Mozilla浏览器，您实际上可以（如果非法）将可见的DOM内容添加到元素外部的元素中。这将避免任何与正文匹配并由内容继承的样式。可能有一些样式在html上匹配，这将击败这种技术，但我发现它很有用

例如，使用jquery:$（'html'）.append（'blah-blah-blah'）

---

如果您不希望库实例干扰正在修改的页面定义的库的使用，那么使用流行库本身就是一个挑战。Greasemonkey的@require对我不起作用。我发现有必要（但可能！）保存jquery脚本分配的两个或三个全局名称的任何现有值，将我的库实例插入DOM，等待加载（必须使用计时器，这很烦人，但我找不到解决方法），在我自己的名称空间中缓存分配给全局变量的值以供我自己使用，并还原保存的值。

我不确定该如何使用，浏览器对此的支持如何，但这是使用全局变量的主要原因之一

---

我们的想法是，您可以插入一个web组件，该组件可以完全设置样式，并且具有只影响影子DOM的特定事件（因此您的模块不会影响页面的其余部分）。

谢谢您的回答！我已经在为所有内容使用超级特定的类名，所以已经完成了。：-）不过，我确实有几个问题：-通过指定元素名称（例如

div layer table{}

等）来覆盖CSS规则吗！重要信息-是否需要指定！对每一条规则都很重要？！无论何时、何地或如何指定，“重要”都会覆盖所有其他内容。您需要为每个规则上的每个样式指定它，如果您担心该样式可能会被您无法控制的另一个样式覆盖。当然，如果您无法控制的样式表也使用，则可能会增加一个问题！重要的。那么我相信这是一个问题！重要的是最后声明的。@Rex，我相信如果有两个，它将符合标准的特殊性规则！重要的竞争规则。在任何情况下，你仍然需要在你的包装上重新设置CSS。+1用于Eric Meyer重置，而不是可怕的*{padding:0；margin:0}CSS重置用于跨浏览器标准化，而不是跨CSS样式表。是的，但是CSS重置（比宿主CSS更具体）将覆盖以前设置的规则（删除时髦的粉色背景等）粉色背景是