UL> LI> A中较少循环以增加填充

Question

我的html中具有以下层次结构。

<ul>
  <li>
  <a></a>
   <ul>
   <li>
   <a></a>
     <ul>
      <li>
      <a></a>
      </li>
     </ul>
   </li>
  </ul>
 </li>
</ul>

我只想增加锚元素中的填充。我想出了以下更少的循环，但仅增加了ul li中的填充。我不知道如何选择锚元素。

.make-nested-lists(5);

.make-nested-lists(@n, @i: 0) when (@i < @n) {
    ul li {
        padding-left: (30px + 15 * @i);
        .make-nested-lists(@n, (@i + 1));
    }
}

Answer 1

只需将padding上的a而不是li上添加：

.make-nested-lists(5);

.make-nested-lists(@n, @i: 0) when (@i < @n) {
    ul li {
        a{
            padding-left: (30px + 15 * @i);
        }

        .make-nested-lists(@n, (@i + 1));
    }
}

演示（带有已编译的LESS）：

ul li a{padding-left:30px}ul li ul li a{padding-left:45px}ul li ul li ul li a{padding-left:60px}ul li ul li ul li ul li a{padding-left:75px}ul li ul li ul li ul li ul li a{padding-left:90px}

<ul>
  <li>
    <a>test 1</a>
    <ul>
      <li>
        <a>test 2</a>
        <ul>
          <li>
            <a>test 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

将p添加到链接（a）中，而不是在li元素上。