Альтернативные цвета для вложенных DIV без JQuery

Question

Я разрабатываю древовидную структуру с вложенными DIV s. Ну, а не «вложенные», я бы назвал их «matrioshked», так как каждый DIV может содержать динамически генерируемые дети, внуки и т. Д., Имея каждый свой собственный DIV внутри родительского.

Есть ли способ чередовать цвет фона элементов? Конечно, обычные «четные» и «нечетные», используемые для строк и списков, не могут работать, а a priori Я не знаю, сколько слоев будет, поэтому я не могу объявить div div div div и т. Д. . стиль.

Я знаю, что я могу вставлять внутрь каждого ребенка DIV изображение 1x1 с ONLOAD, проверяющее цвет родителя и использование альтернативы для ребенка, но я надеюсь найти более практичное (и элегантное) решение.

P.S. Я не могу использовать JQuery для проблем совместимости.

редактировать:

Здесь, более или менее, то, что я должен сделать: http://jsfiddle.net/gmw3t8rd/

Answer 1

Эта проблема может быть решить это вы видите этот сайт. http://css.maxdesign.com.au/listutorial/sub_master.htm

Answer 2

Ваше описание немного противоречит вам JSFiddle, но если я сейчас понимаю, что вы хотите, вы можете просто использовать CSS для применения нужной раскраски.

#elenco_generi div.g0 { 
    background-color: #ffffdd; 
} 

#elenco_generi div .figli div .figli div, #elenco_generi div .figli div .figli div .figli div .figli div { 
    background-color: #ffffff; 
} 

#elenco_generi div.g1, #elenco_generi div .figli div, #elenco_generi div .figli div .figli div .figli div, #elenco_generi div .figli div .figli div .figli div .figli div .figli div { 
    background-color: #ddddff; 
} 

JSFiddle: http://jsfiddle.net/hxgLpw3e/

Я знаю, что JSFiddle выглядит «сломанный» к низу, но это потому, что, казалось, прекратить использование .figli, чтобы обернуть div с. Это всегда хорошая идея иметь фиксированную структуру о том, как контент будет многослойным. Торговля просто усложняет ситуацию.

В принципе, вы используете обертку div ID в качестве отправной точки и просто добавляете уровень каждый раз. Если вы этого не хотите, вы можете попробовать его объяснить?

Предполагая, что это то, что вы хотели, я настоятельно рекомендую вам просто пойти с JavaScript, намного проще сделать это с расширяемым контентом.

Answer 3

Я не знаю, почему это отказывается работать как скрипка, жалуясь на то, что функция Javascript не определена. В Firefox я спустился, пока не было достаточно места для кнопки. Во всяком случае, здесь есть все, что сократилось на суше.

CSS-:

div { 
    padding: 1em; 
    margin: 1em; 
    text-align: center; 
} 
.blue { 
    border: 3px solid blue; 
    background: #99f; 
} 
.green { 
    border: 3px solid green; 
    background: #9f9; 
} 

Это Javascript фрагмент кода:

function makeChild(TheDiv) { 
    var nextBg = 'blue'; 
    var thisId = TheDiv.dataset.did; 
    var nextId = parseInt(thisId) + 1; 
    if (TheDiv.dataset.bg =='blue') { 
     var nextBg = 'green'; 
    } 
    var code = '<div class="' + nextBg + '" id="child_' + nextId + '" data-bg="' + nextBg + '" data-did="' + nextId +'">This is a child<br /><br /><input type="button" onclick="makeChild(this.parentNode)" value="OPEN ANOTHER CHILD" /><div id="sonny_' + nextId + '"></div></div>'; 
    document.getElementById('sonny_' + thisId).innerHTML = code; 
} 

и это HTML:

<div id="main"> 

<div class="blue" data-bg="blue" data-did="0"> 
<input type="button" onclick="makeChild(this.parentNode)" value="OPEN CHILD" /> 
<div id="sonny_0"></div> 
</div> 

</div> 

Это делает именно то, что я хочу: вложенными DIV сек с чередующимися цветами.

Надеюсь, этот небольшой трюк будет полезен кому-то еще!