防止由 firefox 插件创建的 html 元素的样式被站点样式表覆盖答案

【问题标题】：Preventing styles of html elements created by firefox plugin getting overridden by the sites stylesheet防止由 firefox 插件创建的 html 元素的样式被站点样式表覆盖
【发布时间】：2011-09-29 12:56:19
【问题描述】：

我正在从我的 firefox 插件的每个页面中注入一些 html + css。但是这种样式有时会被样式表覆盖。我想停止这种行为。

我知道这可以通过一些 css 技巧来解决。例如添加!important。但是在 firefox 或 xul 中有没有一种方法可以轻松做到这一点？

【问题讨论】：

标签： css firefox-addon xul firefox-addon-sdk

【解决方案1】：

仅使用!important 是不够的，网页可以做同样的事情并且仍然会覆盖您的样式。您可以use the Stylesheet Service 注册用户样式表。如果您随后使用!important，则网页将无法再覆盖您的样式。

请注意，用户样式表始终是全局的，适用于所有网页以及浏览器自己的 XUL 文档。您可以使用 @-moz-document 将它们限制在特定网页上。

【讨论】：

在将我的插件提交到 Firefox 时这会导致任何问题吗？
为什么要这样？这是各种插件使用的方法，最重要的是时尚。
@WladimirPalant 对于我的 CSS 中未指定的属性怎么办？如果我有一个textarea 指定height 的20px 并且没有min-height，但页面有textarea {min-height: 40px}，我的高度被覆盖。我知道我可以设置 min-height 属性，但是为每个注入的 HTML 元素设置每个可能的属性似乎不是一个好的解决方案。有什么想法吗？
@willlma：没有办法，你必须设置所有相关的 CSS 属性。
@WladimirPalant 好的，会的。感谢您的快速回复。

【解决方案2】：

#MEGA_PLUNGIN a {}
#MEGA_PLUNGIN span {}
#MEGA_PLUNGIN div {}
#MEGA_PLUNGIN table {}
...

不是最好的解决方案，但正确...

【讨论】：

【解决方案3】：

对我来说，这是您肯定会使用!important 的一种情况。

也就是说，您可以尝试使用特定性来确保设置样式。

因此，请确保您的目标元素尽可能精确，以便覆盖那些不那么具体的样式。

例如，如果你有这个结构

<body>
    <div>
        <h1 class="something">
            <a href>

网站的样式可以定位

h1.something a{

你应该以此为目标

body div h1.something a{

更具体，会覆盖上述样式。

您可以做的另一件事是在</head> 之前append 您的样式，这将使它们在级联中出现在最后，如果它们相等，将被应用。

【讨论】：