如何使用 CSS 或 jQuery 完全重置 div CSS答案

【问题标题】：How to reset a div CSS completely using CSS or jQuery如何使用 CSS 或 jQuery 完全重置 div CSS
【发布时间】：2011-08-04 08:17:32
【问题描述】：

我有一个模板，我想在一个 div 中显示该 HTML 模板。

该 HTML CSS 模板会自动继承应用程序中使用的 CSS。

我希望它不继承 CSS。我需要完全重置那个 div 的样式...

示例代码：

<html>
    <head><title>hi</title>
        <link href="mystyle.css" />
    </head>
    <body>
        This is my website content

        <div id="template_holder">
           <table>
             <tr>
                <td>name</td>
                <td>Raja</td>
             </tr>
           </table>
        </div>
    </body>
</html>

在上面的代码中，template_holder 包含一个从mystyles.css 继承样式的表。

我不想让它继承它...

【问题讨论】：

您可以给我们任何示例代码吗？
嗯...stackoverflow.com/questions/4877921/…

标签： javascript jquery html css

【解决方案1】：

对于这种情况，iframe 可能是正确的选择。

或者，您应该向页面模板的主标记添加一个类或 id 或其他一些引用参数，并仅将页面中的每个 CSS 规则引用到该主元素，方法是让每个 CSS 选择器都以该主引用开头。但是，如果您无法控制模板 CSS，则可能无法做到这一点。

请注意，在页面的 div 中显示模板可能包含重复的 ID，例如，许多模板通常对相同的元素使用相同的 ID（#header、#footer、#main、#wrapper、ecc...） .您可以使用 iframe 避免这两种情况。

编辑

看到您的代码示例后，我将专门为您的#template_holder div 创建一个 CSS 重置，最终使用 !important 关键字，以便其中的每个其他元素都将继承它的 CSS。

不知道这是否可行，但值得一试。

【讨论】：

【解决方案2】：

我不确定我是否完全理解这种情况，但您应该查看!important css 声明，它可能会起作用。

编辑：通过代码中的澄清，我建议的内容可能看起来像

#template_holder table {
    //override whatever like background-color:White!important;
}

【讨论】：

所以我必须覆盖所有的 css 元素？因为我的模板可能包含任何 css 元素
你不知道可能有什么不需要的 CSS 吗？在这种情况下，这可能不是最好的解决方案。

【解决方案3】：

在这种情况下iframe使用是最好的

【讨论】：