html - 混合了字母和罗马字符的嵌套编号列表

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上的解决方案为此question ，它只能创建嵌套数字，但不能创建字母和罗马字符。

下面是我所做的(伪造效果):

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