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