嵌套计数器HTML列表1 1.1 a i - 这是可能的

Question

我有一个我需要实现的复杂的嵌套有序列表，如下所示：

1. one
2. two
    2.1 two.one
    2.2 two.two
    2.3 two.three
3. three
    3.1 three.one
    3.2 three.two
        a. lower-alpha-a
        b. lower-alpha-b
            i. lower-numeral-i
            ii. lower-numberal-ii
4. four

我用css计数器尝试了这个但是我不能在第一级之后停止增量，它会一直到最后一级。

CSS

OL {
    counter-reset: item
}
LI {
    display: block
}
LI:before {
    content: counters(item, ".")" ";
    counter-increment: item;
}

HTML

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two</li>
      <ol type="a">
        <li>three.two.one</li>
        <li>three.two.two
          <ol type="i">
            <li>three.two.one</li>
            <li>three.two.two</li>
          </ol>
        </li>
      </ol>
    </ol>
  </li>
  <li>four</li>
</ol>

jsfiddle链接：http://jsfiddle.net/902fLnt7/2/ 任何帮助将不胜感激

Answer 1

为每个级别添加一个新计数器似乎可以解决问题

<强> See Demo

ol {
    counter-reset: item;
}
.a li:before {
    content: counter(item, lower-alpha)". ";
}
.i li:before {
    content: counter(item, lower-roman)". ";
}
li {
    display: block;
}
li:before {
    content: counters(item, ".")" ";
    counter-increment: item;
}

ol {
  counter-reset: item;
}
.a li:before {
  content: counter(item, lower-alpha)". ";
}
.i li:before {
  content: counter(item, lower-roman)". ";
}
li {
  display: block;
}
li:before {
  content: counters(item, ".")" ";
  counter-increment: item;
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol class="a">
          <li>three.two.one</li>
          <li>three.two.two
            <ol class="i">
              <li>three.two.one</li>
              <li>three.two.two</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

Answer 2

与链接的答案略有不同。

首先，您的问题HTML中存在错误嵌套的有序列表。 <li>three.two</li>的结束标记应包含<ol type="a">

我们需要删除较低级别的内容：

ol li li li:before {
  display: none;
}

稍微更改计数器为第二级：

ol li li:before {
  content: counters(item, ".")" ";
  counter-increment: item;
}

并给我们的低级别他们的样式（列表样式应该是一致的，所以不需要类）：

ol li li li {
  list-style: lower-alpha;
}
/* Every step down from here will take this property */
ol li li li li {
  list-style: lower-roman;
}

当然，如果确实需要，我们可以使用类覆盖一个级别：

ol.alpha li {
  list-style: lower-alpha;
}

完整示例

ol {
  counter-reset: item;
}
ol li {
  list-style: none;
}
ol li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
}
ol li li:before {
  content: counters(item, ".")" ";
  counter-increment: item;
}
ol li li li:before {
  display: none;
}
ol li li li {
  list-style: lower-alpha;
}
/* Every step down from here will take this property */

ol li li li li {
  list-style: lower-roman;
}
/* Override with classes */

ol.alpha li {
  list-style: lower-alpha;
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two
            <ol>
              <li>three.two.one</li>
              <li>three.two.two

                <ol>
                  <li>three.two.one</li>
                  <li>three.two.two
                    <ol>
                      <li>three.two.one</li>
                      <li>three.two.two
                        <ol class="alpha">
                          <li>three.two.one</li>
                          <li>three.two.two</li>
                        </ol>
                      </li>
                    </ol>
                  </li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>