我创建了一个将 DOM 元素直接插入页面的浏览器扩展,并且我想防止它们被页面中已有的任何继承的 CSS 设置样式。目前,我将我的 css 调用附加到头部以引入我自己的样式。到目前为止,我的计划是使用晦涩的类/id 名称并创建非常具体的规则。在某些情况下,我不得不使用!important。我觉得我把我的道德扔出了门!
关于如何有效地防止继承样式并允许浏览器有效地呈现我的代码的任何想法?
关于如何使用 iframe 来做到这一点的任何想法?我在后端运行 PHP。
您无法阻止级联样式表的级联位,但您可以定义所有样式,因此没有任何东西可以继承。
一种快速的方法是按照您的需要设置它们的样式,然后使用 webkit 的开发人员工具(或 firebug)来查看元素的计算样式。
然后,您可以将所有计算的样式复制到您的样式表中。确保使用唯一的 ID,这样它们就不会与页面上的任何内容重叠,并且样式将非常具体。添加!important
......正如我所说的那样......以防止某些奇怪的特定样式表重叠并确保您的样式表调用被添加到 HEAD 的末尾或将其插入到正文末尾的样式块中以确保它不能被覆盖。