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>

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

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/

嵌套的编号列表与字母和＆amp;罗马人物

1 个答案: