css - 嵌套列表 css 规则支持无限深度

Question

我有以下CSS:

.navi-live ol{
  margin:0;
  padding:0;
  list-style-type: none;
}
.navi-live li{
  margin:0;
  padding:0px;
  list-style-type: none;
}
.navi-live ol .nav-item-contents{
  padding-left:20px;
}
.navi-live ol ol .nav-item-contents{
  padding-left:40px;
}
.navi-live ol ol ol .nav-item-contents{
  padding-left:60px;
}
.navi-live ol ol ol ol .nav-item-contents{
  padding-left:80px;
}
.navi-live ol ol ol ol ol .nav-item-contents{
  padding-left:100px;
}

这行得通(我不想缩进 li 或 ol，而是缩进内容，就像缩进 li 和 ol 一样)，但限制了我创建的 css 规则的数量。

如何在不受限于必须为我想要支持的每个新缩进级别创建新规则的情况下执行上述操作？

jsfiddle:http://jsfiddle.net/k4hjp/1/

谢谢，

Answer 1

您应该能够对所有 nav-item-content div 进行简单选择，在递增 padding 变量的同时遍历每个 div。

jsfiddle

//put this inside a function and call it when you want to append to the navigation
var padding = 20;
$('.nav-item-contents').each(function(){
    $(this).css('padding-left',padding+'px');
    padding+=20;
});

编辑

添加了如何附加子项的演示:jsfiddle .