2012-02-03 6 views
2

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

Здесь ули имеют стили из класса "ехрга". Держатель div загружает динамический контент. Я не хочу, чтобы любой из стилей expr добавлялся в div внутри. Но я хочу, чтобы они были применены к другим элементам списка «li», а затем не к divs внутри других элементов списка.

ответ

2

Вы можете сбросить наследуемые свойства для всех элементов-потомков во внутренних 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?

+0

В динамическом теге div есть несколько тегов h4 и тег div. Я хочу сохранить размер шрифта h4 и все другие оригинальные свойства. Так что я должен сделать определение для всех тегов, существующих внутри моего тега div отдельно, как это? Я буду редактировать свой пост с помощью css и содержимое тега div после загрузки для большей ясности. – Pradep

+1

Селектор '*' применяется к любому элементу. Если вы хотите оставить какой-то элемент, вы можете использовать ': not' selector (но в CSS это не работает для IE8 или ниже), например, в' .expr div *: not (h4) ' –

+0

Пожалуйста, посмотрите предложение iframe, которое я обновил в ответе. –

0

Конкретизируйте рамки стиля:

li.somestyle { ... } 

, а затем

<li class="somestile"> 
0

вы должны загрузить HTML в качестве фрейма. Таким образом, загруженный html не будет затронут.