时间戳

首页 > 解决方案 > 您可以使用 SCSS 根据嵌套深度设置元素的填充吗？

html - 您可以使用 SCSS 根据嵌套深度设置元素的填充吗？

问题描述

我正在设计一个具有多个级别的下拉菜单，并且需要li根据嵌套的深度设置选项的填充。

<ul>
    <li>1</li>
    <li>2</li>
    <ul>
        <li>a</li>
        <li>b</li>
        <ul>
           <li> i </li>
           <li> ii </li>
           <li> iii </li>
        </ul>
     </ul>
</ul>

该选项2有两个子选项：a和b。该选项b有 3 个子选项：i, ii,iii

有什么办法可以让li第一层的所有东西都有 16px 的 padding-left，然后所有li的 s 都有 padding-left 之类的东西(parent li's padding-left) + 20px？

注意：我真正想要的是一个接一个的所有选项，每个选项的填充都基于其嵌套级别，而无需为每个级别编写显式类。

编辑：这是主要问题的基本codepen Codepen ：我想要的是每个项目的悬停背景扩展到主容器的整个宽度

标签： htmlcsssass

解决方案

编辑：要动态增加填充，您可以执行以下操作：

ul:nth-child(1) > * {
    padding-left: 16px;
}

检查下面的片段：

ul:nth-child(1) > * {
    padding-left: 16px;
}
<ul>
   <li>1</li>
   <li>2</li>
   <li>
      <ul>
         <li>a</li>
         <li>b</li>
         <li>
            <ul>
               <li> i </li>
               <li> ii </li>
               <li> iii </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

推荐阅读