jquery - HTML-CSS；为层次结构中的每个下一个嵌套 ul li 添加 5px 到 margin-left

Question

我有嵌套的ul-->li树，我想要设置嵌套的ul padding: 0; margin :0 0 0 0；然后将 margin-left:5px 给它的父级 ul 边距。例如，在第 1 层，ul 是 margin-left:0px，那么第 2 层的嵌套 ul 将是(parent ul margin + 5px)，这将是 0+5 = 5px；对于第 3 层的嵌套 ul 将是 (5px + 5xp) = 10px;

我更喜欢通过 css 实现，如果不是，那么 jquery

https://jsfiddle.net/vr84pd6u/7/

html

<div>
<ul class="tree">
    <li><a>System Administration</a></li>
    <li><a>System Core</a>
        <ul>
           <li><a>f2</a></li>
           <li><a>f3</a>
              <ul>
                 <li><a>f4</a></li>
                 <li><a>f5</a></li>
                 <li><a>f6</a></li>
              </ul>
           </li>
           <li><a>f7</a>
               <ul>
                  <li><a>f8</a>            
                  <ul>
                     <li><a>f10</a>            
                     <ul>
                         <li><a>f11</a></li>
                     </ul>
                  </li>
                </ul>
            </li>
                 <li><a>f9</a></li>
             </ul>
         </li>
       </ul>
    </li>
    <li><a>MyFunctionA</a>
       <ul>
         <li><a>f12</a>
            <ul>
               <li><a>f13</a></li>
               <li><a>f14</a></li>
            </ul>
         </li>
          <li><a>f16</a></li>
        </ul>
      </li>
    <li><a>Course Management</a></li>
</ul>

</div>

CSS

 .tree ul li ul {
        border-left: 1px solid #D9DADB;
        background-color: limegreen;
        padding: 0;
        margin: 0 0 0 0;
    }

Answer 1

添加以下规则应该会产生您想要的效果:

/*Level 1*/
.tree > li > ul {
    margin: 0;
    padding: 0;
}
/*All other levels*/
.tree > li > ul ul {
    margin: 0 0 0 5px;
    padding: 0;
}

.tree > li > ul 将规则应用到 ul，ul 是 li 的直接后代，而 li 本身就是直接后代到 .tree。 .tree > li > ul ul 获取第一层 ul 的所有后代 ul。

.tree 中作为另一个 ul 子级的每个 ul 将获得 5px 左边距，因为每个ul 是另一个 ul 的子级，此边距实际上将被堆叠。

.tree ul li ul {
    border-left: 1px solid #D9DADB;
    background-color: limegreen;
}
/*Level 1*/
.tree > li > ul {
    margin: 0;
    padding: 0;
}
/*All other levels*/
.tree > li > ul ul {
    margin: 0 0 0 5px;
    padding: 0;
}

<div>
    <ul class="tree">
        <li><a>System Administration</a></li>
        <li><a>System Core</a>
            <ul>
               <li><a>f2</a></li>
               <li><a>f3</a>
                  <ul>
                     <li><a>f4</a></li>
                     <li><a>f5</a></li>
                     <li><a>f6</a></li>
                  </ul>
               </li>
               <li><a>f7</a>
                   <ul>
                      <li><a>f8</a>            
                      <ul>
                         <li><a>f10</a>            
                         <ul>
                             <li><a>f11</a></li>
                         </ul>
                      </li>
                    </ul>
                </li>
                     <li><a>f9</a></li>
                 </ul>
             </li>
           </ul>
        </li>
        <li><a>MyFunctionA</a>
           <ul>
             <li><a>f12</a>
                <ul>
                   <li><a>f13</a></li>
                   <li><a>f14</a></li>
                </ul>
             </li>
              <li><a>f16</a></li>
            </ul>
          </li>
        <li><a>Course Management</a></li>
    </ul>
</div>