与字母和罗马字符混合的嵌套编号列表

Question

我可以知道是否有可能创建这样的东西：

1. Food
   1.1 Vege
       a. Carrot
          i. White Carrot
          ii. Red Carrot
   1.2 Meat
       a. Chicken
       b. beef
2. Beverages

我已经看到许多带有数字和字母的混合列表的解决方案，但我无法使用更简单的css代码制作这样的东西，其中包括数字，嵌套数字，字母，罗马字符。

有关此问题，请参阅jsFiddle上的解决方案，它只能创建嵌套数字，但没有字母和罗马字符。

以下是我所做的（假装效果）：

.primary {
  list-style-type: none;
  counter-reset: item;
  margin: 0px;
  padding: 0px;
}
/* Direct child under ol */
.primary>li {
  counter-increment: item;
}
/* Before direct child under ol */
.primary>li:before {
    content: counters(item, ".") ". ";
    padding-right: 0.6em;    
}
.primary>li li {
    margin: 0px;
}
/* Before li of second level ol */
.primary>li li:before {
    content: counters(item, ".") " ";
}
/* Third level ol */
.pri-inner {
    list-style-type: lower-alpha;
    padding-left:20px;
}
/* Hide the counter content on third level */
.pri-inner li:before {
    content:none;
    display:none;
}
/* Fourth level ol */
.pri-inner2{
    list-style-type: lower-roman;
    padding-left:25px;
}

示例 html 代码如下所示

<ol class="primary">
  <li>First
    <ol class="primary">
      <li>Inside First</li>
      <li>
        <ol class="pri-inner">
          <li>Inside inside
            <ol class="pri-inner2">
              <li>Maximum inside</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Second</li>
</ol>

那么，有没有更好的方法来实现这一目标呢？因为我必须在第三层隐藏计数器。

Answer 1

counter()接受列表类型的第二个参数，即 counter(item, lower-alpha)

因此，以下CSS可以做到这一点，或者可以调整为使用您的类名。

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}
li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}
li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;    
}
li li {
    margin: 0;
}
li li:before {
    content: counters(item, ".") " ";
}
li li li:before {
    content: counter(item, lower-alpha) ". ";
}
li li li li:before {
    content: counter(item, lower-roman) ". ";
}

http://jsfiddle.net/eke4afd8/