阻止现有CSS为注入的HTML/CSS设置样式

其他人建议了非常好的方法来防止你的CSS影响页面,并确保你的CSS优先,但你似乎最关心的是页面的CSS影响你-也就是说,添加一个时髦的,意想不到的风格(如使所有的沙发都有一个粉红色的背景)。

我能为您考虑的唯一方法是防止它们的样式影响注入的代码,就像在 iframe . 否则,你要定义的东西太多了——你必须定义每一种风格。( padding , border , margin , background …名单上的 * 选择器(或者更好, #yourid * “,所以您只需覆盖自己的内容),这样就可以保证对CSS的绝对控制。

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

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

我找到了 someone who has written up such a solution .如果你在页面上向下滚动足够远,你会看到它(从Suzyuk)。它看起来不完整,但确实是一个好的开始。

(我也有兴趣知道是否有好的方法来防止这种情况发生。以前我写过GreaseMonkey脚本,在页面上注入代码,不得不写CSS来覆盖页面的CSS,但在这些情况下,我知道我的目标是谁,可以直接将我的CSS调整到页面上。)

用一个特定的类包装注入的HTML <div> ,如

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

然后在CSS中,在所有规则前面加上前缀 .my-super-specialized-unique-wrapper 使用 !important 每一条规则。这将指示客户机浏览器将您的规则视为匹配的任何元素的至高无上,而不考虑可能针对它们的任何其他样式——即使您控制之外的其他规则更具体。

为什么不像这样插入内嵌格式的HTML元素:

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

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

其他解决方案是 非常具体 dom id在元素上,然后在添加的css上设置它们的样式

你只需要 specific 使用CSS选择器。这比宿主页面的CSS规则更具体。您可能还需要添加一种全局css reset-modified来只重置HTML。我指的是将所有颜色、背景、字体、填充等重置为单一标准的内容。从那里你可以建立自己的风格。

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

例如,使用jquery:$('html').append('<div id=“mycontent”>blah blah blah</div>');

当您不希望库的实例干扰您要修改的页面所定义的库的使用时,使用流行库本身就是一个挑战。Greasemonkey的“要求”不适合我。我觉得有必要(但可能!)要保存jquery脚本分配的两个或三个全局名称的任何现有值,请将库的实例插入到dom中,等待它被加载(必须使用计时器,这很烦人,但我看不到绕过它的方法),将分配给全局名称的值缓存到自己的命名空间中供自己使用,并还原保存的值。

我不知道应该如何使用它,浏览器是否支持它,但它是使用的主要原因之一 http://www.w3.org/TR/shadow-dom/

其思想是,您可以插入一个Web组件,该组件可以完全格式化,并且具有只影响影子DOM的特定事件(因此您的模块不会影响页面的其余部分)。