Question

我有一个包含元素，样式（导入和内联）的网页

我想重置特定元素的样式。

示例：

HTML：

<div class="parent">
    This is the parent div, it colors the <strong>strong in red</strong>
    makes a <small>small underlined</small>
    <h4>sets a margin-left 10px for a H4</h4>
    and many other stuff<br><br>
    <div class="child">
        this is the child element<br>
        here a <strong>strong should not be red</strong><br>
        <small>small should not be underlined</small>
        <h4>H4 should not have a margin-left</h4>        
        and so on...
    </div>
</div>

CSS：

.parent strong{
    color:red;
}
.parent small{
    text-decoration: underline;
}
.parent h4{
    margin-left: 10px;
}

我希望子 div忽略来自其父母的样式，包括 html 元素

Here举例说明了我的例子

我在这里给出的风格只是例子，还有更多
我无法修改父CSS，正在动态生成
我的孩子 div被注入页面，我也可以注入我想要的任何CSS
我事先无法知道父CSS的内容

我到目前为止找到的唯一解决方案是在iframe中包含子元素，但真的很难看！

任何人都可以帮助如何实现这一目标？ JS解决方案也是可以接受的。

Answer 1

.child strong{
    color:pink !important;
}

1.您通过!important调整注射码css。

2.即使你不能预测父母的CSS，你也只能为注入的代码提供一些基本的CSS。

Example

Answer 2

您可以使用css立即子选择器'＆gt;'

在你的例子中

.parent>h4{
    margin-left: 10px;
} 


.parent>strong{
    color:red;
}

检查更新的演示

http://jsfiddle.net/WRDft/11/

参考：http://msdn.microsoft.com/en-in/library/ie/aa358819(v=vs.85).aspx

CSS '>' selector; what is it?

Answer 3

如果我正确理解你，如果你知道什么内容被注入你的孩子div，那么JQuery解决方案非常简单：

$(".child strong").css({"color":"black"});
$(".child small").css({"text-decoration":"none"});
$(".child h4").css({"margin-left":"0"});

然后可以将JQuery代码包装在您想要的任何类型的函数中。

这是添加了JQuery的fiddle。希望有所帮助。

注意：JQuery selector - 例如：$(".child strong") - 可以是您想要的特定或一般的，您可以使用逗号分隔列表添加任意数量的css规则这个：

$(".child strong").css({"color":"black", "font-weight":"bold", "text-decoration":"underline", etc, etc});

Answer 4

这个问题已经被提出并进行了讨论。

没有办法覆盖清晰的风格，但有工作。

Reset/remove CSS styles for element only

Answer 5

非常感谢大家的想法，不幸的是，我设法实现这一目标的最好方法是将我的内容包装在IFrame中

优势：立即轻松重置
缺点：我无法操纵IFrame之外的元素

重置HTML元素的样式

5 个答案: