Javascript 缩进JQuery可选列表-当缩进级别的数量事先未知时

我正在尝试与父母/孩子/孙子/制作一个可选择的列表。。。凹痕。请参阅下文：

HTML代码：

<li class="level-1">
    <div>Parent 1 - Lorem ipsum dolor sit amet</div>
    <ul class="level-2">
        <li>
            <div>Child 1.1 - consectetur adipiscing elit</div>
        </li>
        <li>
            <div>Child 1.2 - Integer nec odio</div>
        </li>
    </ul>
</li>

.level-1 {
    margin-left: .25em;
    margin-bottom: 1px;
}
.level-2 {
    margin-left: 1em;
}

Javascript代码：

<li class="level-1">
    <div>Parent 1 - Lorem ipsum dolor sit amet</div>
    <ul class="level-2">
        <li>
            <div>Child 1.1 - consectetur adipiscing elit</div>
        </li>
        <li>
            <div>Child 1.2 - Integer nec odio</div>
        </li>
    </ul>
</li>

.level-1 {
    margin-left: .25em;
    margin-bottom: 1px;
}
.level-2 {
    margin-left: 1em;
}

[请参阅jsfiddle]

有没有可能根据子对象的深度动态定义CSS样式？在上面的示例中，我只显示了父/子级别（仅限级别1和级别2），并且我已经为这两个级别定义了适当的“左边距”

但是，实际的级别数只能在运行时确定-例如，我可能需要5个级别的缩进（最多“5级”）或更多。如果我不知道需要多少缩进，是否可以动态定义缩进（通过CSS或不通过CSS）

---

谢谢大家。

1-如果您想为每个级别制作自定义样式，则“>”将对您有好处，“>”只选择直接子级

因此，您可以像这样选择第一个级别：

#theParentList > li

#theParentList li li {
    margin-left: 2em; 
}

第二个层次是

#theParentList > li > ul > li

第三：

#theParentList > li > ul > li > ul > li

等等

2-但是，如果您想使级别向右移动一点，并且您没有为每个级别设置独立的样式，那么您可以应用以下css：

#theParentList li {
    margin-left: 2em; 
}

这将影响到所有“李”的子孙。。。 因此，每一个李都会从它的父代向右移动一点，并随之移动所有的子代

注意：如果你想让它从2级开始移动，那么你可以像这样放置另一个“li”：

#theParentList > li

#theParentList li li {
    margin-left: 2em; 
}

---

谢谢但是，我怎样才能有问题地做到这一点呢？为了便于讨论，假设有10个级别。对我来说，用不同的边距/填充硬编码10个不同的CSS块会很不方便。填充可以通过编程方式完成吗？谢谢。我以为你想为关卡制作独立风格。如果你想让它在每一个层次上都有一点变化，那么你可以用css这样做：谢谢你，伙计。标记作为答案。但是，你能详细说明一下它是如何工作的吗？请查看更新的小提琴：。在这里，您有一个新的“#家长列表li li”块，它似乎适用于所有人。。这怎么能适用于所有的凹痕？！而且，现在鼠标悬停不能正常工作。父对象未正确悬停，当悬停大/曾孙对象时，整个块将高亮显示。这可以防止吗？@Phoneniyx我修改了它以获得您的答案：）对于悬停问题，您可以在代码中将（li-li:hover）选择器替换为（li-div:hover）选择器