如何在 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中文网其他相关文章！