清除特定 div 及其子元素的所有页面样式答案

【问题标题】：Clear all page style for a specific div and it's child elements清除特定 div 及其子元素的所有页面样式
【发布时间】：2011-10-21 16:03:40
【问题描述】：

我在网站上嵌入了一些 html，但被它嵌入的 css 中的页面弄乱了。我怎样才能让它不会发生......我的内容有一个特定的 ID，它的 css 非常具体。它包含图像、div、span、h 标签、p 标签……所有常见的东西。 MY div 的样式表附加到头部。

有什么想法吗？

【问题讨论】：

尝试将!important 添加到受影响的 CSS 属性中。前任。 font-size:14px!important。也就是说，如果我正确理解了您的问题。
我将它添加到我的风格中，但它没有任何区别，因为有些东西我没有定义，例如图像边距。我是否需要添加每个定义以清除所有页面 css？

标签： javascript css

【解决方案1】：

如果我正确理解了您的问题，您可以 recursively 使用 JavaScript 遍历您的 div 的 child elements 并重置 class 和 style 属性。请参阅此fiddle 或以下代码 sn-p：

<html>
    <head>
        <style type="text/css">
            .aClass {
                font-size: 0.75em;
            }

            .anotherClass {
                font-weight: bold;
                color: Fuchsia;
            }
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function removeStuff(elem) {
                elem.children().each(function() {
                    if ($(this).children().length > 0) {
                        $(this).removeClass();
                        $(this).removeAttr('style');
                        removeStuff($(this));
                    } else {
                        $(this).removeClass();
                        $(this).removeAttr('style');
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="myDiv">
            <span class="aClass">This span is classy.</span>
            <div style="font-size: 2em;">
                This div has style.
                <span class="anotherClass">Lorem Ipsum.</span>
            </div>
        </div>
        <a href="javascript:removeStuff($('#myDiv'));">Remove classes &amp; styles</a>
    </body>
</html>

【讨论】：

我的 div 和它的内容是由 jQuery 编写的，所以这可能是要走的路……冷，请给我一个例子？
太棒了！非常感谢。完美的解决方案。

【解决方案2】：

始终通过 ID 定位特定内容并添加特定类。此外，将 !important 添加到 CSS 中的每条规则中。并覆盖您需要保持不变的所有内容。

其他解决方案是为您的内容使用内联 CSS。

【讨论】：