html - 使用 SASS CSS 为嵌套子项动态添加填充

Question

我正在尝试制作一个目录树。它将动态生成嵌套子项。例如这里的 HTML

    <ul>
    <li>
        <div>test</div>
        <span>
            <ul>
                <li>
                    <div>test1</div>
                    <span>
                        <ul>
                            <li>
                                <div>test 2</div>
                                <span>
                                </span>
                            </li>
                            <li> test2</li>
                        </ul>
                    </span>
                </li>
            </ul>
        </span>
    </li>
</ul>

如何向其中添加 SASS CSS，即为每个嵌套的 LI 子级添加 20px。对于第一个 20 级，第二个 40 级等等。我试图直接向每个 LI 添加填充，但这基本上将整个元素移动到左侧，我想将 div 保持为全宽，因此我可以提供一个完整的宽度底部边框，并用填充移动其中的内容。

CodePen Link

这一个做了我想要的，但它不是动态的。

我在这里创建了一个 JSFiddle 链接。 https://jsfiddle.net/h7pbmsh1/1/

Answer 1

听起来您想要链接 child combinator ( > ) 这样:

ul > li > ul > li {
  padding-left: 3em;
}

这样，选择器就不会以初始 Main 为目标<li>元素，但它会针对每一个 <li>属于这些顶级 <li> 的元素元素，可以看出 here .

请注意，以上是“原始”CSS 输出。如果你特别想用 SASS 来做，你可以通过将它放在新行的开头，内部选择器之前来使用子组合器:

ul {
  > li {
    > ul {
      > li {
        padding-left: 3em;
      }
    }
  }
}

可以看到SASS特有的方法 here .

希望对您有所帮助! :)