html - 如何让 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 上放置了填充。这将使每个列表相对于其父项缩进 15 像素。

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