CSS 简化巨人 > 列表？

Question

我有一堆 CSS 代码，我想尝试简化它，但我似乎不知道该怎么做。通过简化它，我希望有 1 或两个“语句”，而不是 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> .

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

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

您可以为每个子级别定义自定义填充，例如 25px如你所愿:

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