如何在 Firefox 3（及更高版本）中自訂有序清單？

在 Firefox 3 中自訂有序列表

左對齊列表數字

要左對齊有序列表中的數字，您可以使用CSS覆蓋預設樣式：

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}

li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}

li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

更改清單後的字符數字

要更改清單編號後的字符，請修改li::before 規則中的content 屬性：

li::before {
  ...
  content: counter(item) "a) ";
  ...
}

轉換為字母/羅馬列表

至使用CSS 將數字轉換為字母或羅馬列表，結合使用counter-reset、counters() 函數和內容屬性：

ol {
  list-style-type: none;
  counter-reset: my-counter;
}

li {
  display: block;
  counter-increment: my-counter;
}

li::before {
  content: counters(my-counter, lower-alpha) ". ";
  ...
}

對於羅馬數字：

li::before {
  content: counters(my-counter, lower-roman) ". ";
  ...
}

請注意，此技術可能不適用於較舊的瀏覽器，包括Internet Explorer 7。

以上是如何在 Firefox 3（及更高版本）中自訂有序清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！