HTML排序列表 - 特定订单

Question

在HTML/CSS中，是否可以按以下格式排列我的排序列表？

o. Item 1 
    i. Item 2 
ii. Item 3 
iii. Item 4 

更一般地说，是否可以创建我自己的有序列表格式？

Answer 1

当然，只需添加一个类型即可使用<ol>罗马数字标签。

<ol type="i"> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Milk</li> 
</ol> 

此HTML吐出：

i. Coffee 
ii. Tea 
iii. Milk 

更多信息可以在这里找到：http://www.w3schools.com/tags/att_ol_type.asp

为您o是第一个位置的项目，在第二个项目启动数量和预先设置第一个使用Javascript或jQuery。

Answer 2

所以你想要的是一个任意样式的第一个元素。随后的所有列表项目都应该有一个数字文本，比它们的自然排序暗示的要低。正确？

因此，你的HTML表很简单：

<ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ol> 

下面的CSS进行实际的魔力。然而（小缺点），我相信你需要明确设置:before伪元素的宽度，以便类似于“普通”列表的外观。

ol { 
    list-style-type: none; 
} 

li { 
    counter-increment: strangecounter; 
} 

li:before { 
    content: counter(strangecounter, lower-roman) ". "; 
    display: inline-block; 
    width: 2em; 
    text-align: right; 
    margin-right: 0.5em; 
} 

ol :first-child { 
    counter-reset: strangecounter -1; 
} 

ol :first-child:before { 
    content: "o. "; 
}