如何在CSS中使用无限嵌套列表进行独特样式设置？

Question

例如这些代码。

.sidebar-nav .metismenu ul a {
    padding: 10px 15px 10px 30px;
}
.sidebar-nav .metismenu ul ul a {
    padding: 10px 15px 10px 45px;
}

我希望额外（任意数量）<ul>在左侧填充中添加15px。我怎样才能实现这一点而不是手动输入？

Answer 1

根据我对您的问题的理解，您希望每个嵌套列表比父级缩进更多？

这里我已将填充放在ul上。这将相对于其父级缩进每个列表15px。

.sidebar-nav .metismenu {
  position: relative;
}

.sidebar-nav .metismenu ul {
  padding-left: 15px;
}

.sidebar-nav .metismenu ul a {
  padding: 10px 15px 10px 0;
  display: block;
  width: 100%;
  color: #ADB5BD;
  cursor: pointer;
}

.sidebar-nav .metismenu ul a:hover {
  color: #F8F9FA;
}

.sidebar-nav .metismenu ul a:before {
  content: "";
  opacity: 0;
  transition: 0.3s opacity ease-out;
}

.sidebar-nav .metismenu ul a:hover:before {
  position: absolute;
  left: 0;
  width: 100%;
  background: #0B7285;
  height: 3em;
  z-index: -1;
  opacity: 1;
  transition: 0.3s opacity ease-out, 0.3s color ease-out;
  transform: translateY(-1em);
}

<div class="sidebar-nav">
  <div class="metismenu">
    <ul>
      <li><a>Item 1</a>
        <ul>
          <li><a>Sub-item</a></li>
        </ul>
      </li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a>
        <ul>
          <li><a>Sub-item</a></li>
          <li><a>Sub-item</a>
            <ul>
              <li><a>Sub-subitem</a></li>
              <li><a>Sub-subitem</a></li>
              <li><a>Sub-subitem</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>