Question

我正在用嵌套的DIV来详细阐述树结构。好吧，而不是＆＃34;嵌套＆＃34;我打电话给他们＆＃34; matrioshked＆＃34;，因为每个DIV都可以包含动态生成的子节点，孙子节点等等，每个DIV都有自己的父节点DIV。

有没有办法交替元素的背景颜色？当然通常＆＃34;甚至＆＃34;和＆＃34;奇怪＆＃34;用于行和列表无法正常工作，先验我不知道会有多少层，所以我不能声明div div div div等风格。

我知道我可以在每个孩子ONLOAD内插入1x1图片，{{1}}检查父母的颜色并使用替代品为孩子，但我希望找到更实用的（和优雅的解决方案。

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看起来很破旧＆＃34;在底部，但那是因为你似乎停止使用.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。

我希望这个小技巧对其他人有所帮助！

没有JQuery的嵌套DIV的替代颜色

3 个答案: