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 pseudo-element 的宽度，以类似于 "ordinary" 列表的外观。

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

HTML 有序列表 - 具体顺序

HTML ordered list - specific order

html

html-lists