CSS简化巨型＆gt;清单？

Question

我有一堆CSS代码，我想尝试简化它，但我似乎无法弄清楚如何做到这一点。通过简化它我可能有一两个“语句”而不是15个。对于浏览器支持我只需要最新的Chrome。反正有吗？

body.app .tree ul li li {
    padding-left: 25px;
}

body.app .tree ul li li li {
    padding-left: 50px;
}

body.app .tree ul li li li li {
    padding-left: 75px;
}

body.app .tree ul li li li li li {
    padding-left: 100px;
}

body.app .tree ul li li li li li li {
    padding-left: 125px;
}

body.app .tree ul li li li li li li li {
    padding-left: 150px;
}

body.app .tree ul li li li li li li li li li {
    padding-left: 175px;
}

body.app .tree ul li li li li li li li li li li {
    padding-left: 200px;
}

Answer 1

display类型的<li>会忽略任何填充或边距，因为您应该使用<ul>内的<li>在列表中创建新的子级别。

<ul>
    <li>
        Item 1-1
        <ul>
            <li>
              Item 2-1
            </li>
            <li>
              Item 2-2
            </li>
        </ul>
    </li>
    <li>
        Item 1-2
    </li>
<ul>

Here's a fiddle showing this behavior.

请注意，您还可以为每个子级别定义自定义填充，例如25px，如您所愿：

li > ul
{
    padding-left:25px;
}