Предотвращение наследования CSS при динамической загрузке DIV

Question

У меня есть неупорядоченный список, и у каждого элемента в ul есть div. Этот div загружает HTML-страницу, используя jQuery. Стиль, который я дал для ul, применяется ко всему html, который загружается в div. Как предотвратить это? Я хочу, чтобы стиль для 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 контенту:

Как применить CSS к iframe?

Answer 2

Вы должны загрузить HTML в iframe. Таким образом, загруженный HTML не повлияет.

Answer 3

Сузьте область действия стиля:

li.somestyle { ... }

, а затем

<li class="somestile">