Question

我有一个无序列表，ul中的每个项目都有一个div。这个div使用jQuery加载一个html页面。我为ul提供的样式正在应用于div中加载的整个html。如何防止这种情况发生。我希望div的样式只应用于自身，而不是任何后代。

我可以尝试为后代添加特定样式，但里面有太多标签。

<ul class="expr">
<li><a class="textlink trig" href ="javascript:void">Using the z-index property of CSS</a>
<div class="holder"></div></li>
<li><a class="textlink" href ="javascript:void">Swapping Images on Mouse Hover</a></li>
</ul>

Css：

    ul.expr
{
    font-size: 125%;
    font-weight: bold;
    list-style: none;
    margin: 0.5em 0;
    padding: 100px 20px;
    color: #1e1a19;

}

页面加载后的

HTML：

<ul class="expr">
<li>
<a class="textlink trig" href="javascript:void">Using the z-index property of CSS</a>
<div class="holder" style="display: block;">
  <title> Image Hover Swap experiment </title>
  <h4> Experiment 2. Swapping Images on Mouse Hover </h4>
Lot of text
<br>
More Text
<br>
Extra Text
</div>
</li>

这里ul有“expr”类的样式。 div“holder”加载动态内容。我不希望任何“expr”的样式被添加到div里面。但我希望它们应用于其他“li”列表项，并且随后也不是其他列表项中的div。

Answer 1

您可以重置内部div中所有后代元素的可继承属性。例如：

.expr div * {
  font-family: Arial, Verdana, sans-serif;
}

*是一个CSS选择器，适用于任何元素。

无论如何，如果你想在div中嵌入整个页面，也许你会对iframe HTML元素感兴趣：

http://www.w3schools.com/tags/tag_iframe.asp

请查看有关如何将CSS应用于iframe内容的主题：

How to apply CSS to iframe?

Answer 2

缩小风格范围：

li.somestyle { ... }

然后

<li class="somestile">

Answer 3

你应该将html加载到iframe。这样加载的html就不会受到影响。

防止动态加载DIV上的CSS继承

3 个答案: