html - 在 UL > LI > A 中增加填充的循环更少

Question

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

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

我只想在 anchor 元素中增加填充。我在 less 中提出了以下循环，但它只是增加了 ul li 中的填充。我不知道如何选择 anchor 元素。

.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

只需在 a 而不是 li 上添加 padding 即可:

.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>