Question

请考虑我在body标签中使用的以下HTML代码：

<ol>
    <li>This is First List Item</li>
    <ol>
        <li>Nested List Item</li>
    </ol>
 </ol>

<ol>
    <li>This is Second List Item</li>
    <ol type = "A">
        <li>Nested List Item with different type</li>
    </ol>
</ol>

我正在使用以下风格：

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, ".") " ";
}

我得到以下输出：

1 This is First List Item
1.1 Nested List Item
1 This is Second List Item
1.1 Nested List Item with different type

我期待最后一个1.1结果从A开始，因为我已经提到了它的类型但是它不起作用。我在这做什么错了？

这是JSFiddle。

Answer 1

自MDN起，ol和ul元素只能包含li元素。这是一件事，第二是你的CSS。 display: table;与list-style-type: none;一起搞乱了。{1}}。使用开发者控制台来了解其余部分。

<ol>
    <li>This is Second List Item</li>
    <li>
        <ol type = "A">
            <li>Nested List Item with different type</li>
            <li>xyz</li>
        </ol>
    </li>
</ol>

使用有序标签上的类型不使用html 5中的列表

1 个答案: