我们如何根据元素深度设置CSS Margin？

Question

我有以下html结构 -

<ul>
    <li><span>1st</span>
        <ul>
            <li><span>2nd</span>
                <ul>
                    <li><span>3th</span>
                        <ul>
                            <li><span>4th</span>
                                <ul>
                                    <li><span>5th</span>
                                        <ul>
                                           ... 
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

想要像那样输出 -

为此，我使用了CSS子选择器和以下类 -

ul li span
{
    padding-left:0px;
}


ul li > ul li span
{
    padding-left:10px;
}

ul li > ul li > ul li span
{
    padding-left:20px;
}

ul li > ul li > ul li > ul li span
{
    padding-left:30px;
}

ul li > ul li > ul li > ul li > ul li span
{
    padding-left:40px;
}

Demo

它的工作完美，但在这里我希望使用任何速记CSS技巧获得我想要的输出（不是上面的父子结构，即ul li＆gt; ul li＆gt; ul li＆gt; ul li .. ..）。因为在我的网页上我有N-levels个UL-LI结构。而且我不想定义N-levels CSS类来设置保证金。

意味着我不想用N-levels这样的结构来定义我的课程 -

ul li > ul li > ul li > ul li > ul li > .....  > (n-1)ul li > ul li span
    {
        padding-left:(n) * 10px; //-- Set margin according level
    }

那么，CSS有什么方法可以做这项工作吗？

如果不是我能用Jquery做到这一点，怎么做？

我不想要这个 -

我希望每个子节点都在＆＃34; 0px＆＃34;那样 -

提前感谢一堆，任何帮助都会很明显...... !!!

Answer 1

只需将padding-left: 10px;放在ul本身

上即可

Answer 2

使用Jquery：

$('ul').each(function(index){
   $(this).find('span:first').css("padding-left",index*10+"px")
});

<强> Working Demo

Answer 3

$('ul').function(){
$(this).css('padding-left','10px')

}