jquery - 我们如何根据元素深度设置 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 > ul li > ul li > 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 来实现吗？如何实现？

我不想要这个 -

我希望每个子节点都像那样从“0px”开始 -

提前致谢，任何帮助都将不胜感激......!!!

Answer 1

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