如何在不影响子列表的情况下调整有序列表中的项目？答案

【问题标题】：How to adjust items in an ordered list without affecting sub-lists?如何在不影响子列表的情况下调整有序列表中的项目？
【发布时间】：2012-06-26 02:58:52
【问题描述】：

我想定义一个带有无序子列表的有序列表。您可以从下面的示例中看到我想要实现的目标。它符合这样一个事实，即无序列表也获得编号标签。我怎样才能防止这种情况（对于进一步的子列表 [等等 3,4 级，...]）？

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      /* %%% ordered lists, see http://stackoverflow.com/questions/2558358/how-to-add-brackets-a-to-ordered-list-compatible-in-all-browsers# %%% */
      ul {
      list-style-type: square;
      padding: 0em 0em 0em 26px; /* indent from left */
      }

      ul li {
      margin: 0.3em 0em 0em 0em; /* space between elements */
      }

      ol {
      list-style-type: none;
      padding: 0em; /* indent from left */
      }

      ol.orderedlist {
      counter-reset:mycounter;
      list-style-type: none;
      }

      ol.orderedlist li:before {
      content: counter(mycounter) ") ";
      counter-increment:mycounter;
      }
    </style>
  </head>
  <body>
    <ol class="orderedlist">
      <li>Point 1</li>
      <ul>
    <li>Foo</li>
    <li>Bar</li>
      </ul>
      <li>Point 2</li>
      <ul>
    <li>Foo</li>
    <li>Bar</li>
      </ul>
    </ol>
  </body>
</html>

【问题讨论】：

附注：确保将您的
- 中。例如<li>text<ul>...</ul></li>，不是<li>text</li><ul>...</ul>
你也应该正确缩进你的标签。

标签： html css list

【解决方案1】：

使用子选择器：

ol.orderedlist > li:before {
content: counter(mycounter) ") ";
counter-increment:mycounter;
}

【讨论】：

非常感谢，很快。

【解决方案2】：

ol.orderedlist ul {list-style: square;}

ol ul {list-style: square;}

ol ul ol ul {list-style: square;}

【讨论】：