2

我试图找到答案，但什么都没有......

我有一个小型应用程序，可以加载到div标签内的其他网站。这div有一个特定的 id，比如 -> "myAppHere"

现在，所有的 html 都在 this 里面div，但是我可以看到我的元素受到每个站点自己的 css 规则的影响。

有没有办法取消所有其他网站css规则？

就像是：

#myAppHere *{
    padding: 0;
    margin: 0;
    etc....
}

因为上面的示例代码不能很好地工作。

4

3 回答 3

3

您不能简单地添加：

 #myAppHere * {
             ...
 }

因为一般规则被更具体的规则覆盖。您没有说应用程序以何种方式加载到该 div 中（是内框架、纯 HTML 等），因此很难找到解决方案。

您可以做的（假设它只是添加到您的#myAppHere元素中的额外 HTML）是检查为每个元素设置的 CSS 样式（使用例如 Firebug）并在您的 CSS 文件中编写您的 on 规则，这些规则更具体。

于 2013-01-13T08:50:54.817 回答
2

这是你在那里的一个可怕的要求。

您可以尝试将 !important 添加到 css 规则中，如下所示：

#myAppHere *{
    padding: 0 !important;
    margin: 0 !important;
    etc....
}

但即使这样也不会覆盖一些在规则中具有 !important 样式属性的元素，例如在发生这种情况时：

<div id="myAppHere">
    <div style="margin: 20px !important;">Hello</div>
</div>

您也许可以使用 javascript 进入其他网站的源代码，并删除所有样式和类属性……这可能是唯一可以确定的方法。像这样的东西，如果你在你的 javascript 中使用 jquery：

$("#myAppHere *").removeAttr("style");
$("#myAppHere *").removeAttr("class");

不过要小心删除这些类属性，因为这意味着如果你想自己设置样式，你将没有任何类可以使用。不过，您可以在之后使用更多的 javascript 添加新类。

于 2013-01-13T07:08:27.303 回答
1

如果您在一个元素中插入一个完整的 HTML 文档div，结果会以一种严重混乱的方式包含无效标记。特别是，如果内部文档有任何style元素，实际上将被视为应用于整个页面。

解决方案是停止这样做（并首先考虑您是否可以合法地做这些事情——这通常会构成侵犯版权）。从技术上讲，您需要删除或重写嵌入文档的大部分内容（例如，没有简单的方法来处理其中的 CSS 代码或从中链接），或者使用iframe元素（或frame或object元素）将页面嵌入为“自治”（因此它将显示在独立的子窗口中）。

于 2013-01-13T08:55:46.840 回答