淘先锋技术网

首页 1 2 3 4 5 6 7

CSS中的ol属性是用来控制有序列表的样式的。下面介绍几个常用的属性:

ol {
list-style-type: decimal;
list-style-position: inside;
counter-reset: section;
counter-increment: section;
}

list-style-type可以设置有序列表的编号风格,常用的有:

  • decimal:1, 2, 3...
  • lower-roman:i, ii, iii...
  • upper-roman:I, II, III...
  • lower-alpha:a, b, c...
  • upper-alpha:A, B, C...

list-style-position可以设置编号的位置,常用的有:

  • inside:编号在列表项内部
  • outside:编号在列表项外部

counter-resetcounter-increment是用来设置计数器的,常用于制作标题样式。先通过counter-reset设置计数器名字和初值,再通过counter-increment进行递增。例如:

h2:before {
counter-reset: section;
}
h3:before {
counter-increment: section;
content: counter(section)". ";
}

上面的代码会在每个h3标题前加一个有序编号,编号从1开始。其中content: counter(section)". ";是用来设置计数器的显示样式,". "表示编号后面跟一个空格。