首页  >  取值与单位 Values and Units  >  生成内容(Content)  >  counters()

版本 : CSS2/CSS3 counters()

语法:

counters() = [ counters(name, string) | counters(name, string, list-style-type) ]{1,}

说明:

重复插入计数器。
  • 在CSS2.1中counters()只能被使用在content属性上。
  • counters()类似于重复使用了counter(),来看个示例

    HTML:

    <ol class="test"><li>Node<ol><li>Node</li><li>Node</li></ol></li><li>Node</li><li>Node</li></ol>

    counters():

    ol { counter-reset: item; } li:before { counter-increment: item; content: counters(item, "."); }

    counter():

    .test2 { counter-reset: item; } .test2 li { counter-increment: item; } .test2 li:before { content: counter(item)"."; } .test2 li li { counter-increment: subitem; } .test2 li li:before { content: counter(item)"."counter(subitem); }

    从上述代码可以看出,counters()适合使用在需要继承的章节上,而counter()更适合用在独立的计数场景上。

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-7.02.0+4.0+3.1+3.5+3.2+2.1+18.0+
8.0+