• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • counters()

    版本:CSS3

    CSS 函数 counters()是一个嵌套计数器,返回表示指定计数器当前值的连接字符串。counters()函数有两种形式:counters(name, string)或 counters(name, string, style)。它通常和伪元素搭配使用,但是理论上可以在支持值的任何地方使用。生成的文本是具有给定名称的所有计数器的值,从最外层到最内层,之间由指定字符串分隔。计数器以指示的样式呈现,如果未指定样式,则默认为十进制。

    示例

    /* Simple usage  - style defaults to decimal */
    counters(countername, '-');
    
    /* changing the counter display */
    counters(countername, '.', upper-roman)
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE8以上版本的浏览器都支持counters()

    语法

    counters()(<custom-ident>,<string>,<counter-style>?)

    取值

    • <custom-ident>:自定义标识。一个标识计数器的名称,区分大小写,并且与counter-resetcounter-increment中的“名称”相同。名称不能以两个破折号开头,并且不能为none, unset, initial,或 inherit。
    • <counter-style>:计数器样式。计数器样式名称或symbols()函数,其中计数器样式名称是数字,字母或符号的简单预定义计数器样式,复杂的东亚或埃塞俄比亚长手预定义计数器样式,或其他预定义计数器样式。如果省略,则计数器样式默认为十进制。
    • <string>:字符串。任意数量的文本字符。非拉丁字符必须使用其 Unicode 转义序列进行编码:例如,\000A9表示版权符号。

    实例

    <ol>
    	<li>Node
    		<ol>
    			<li>Node</li>
    			<li>Node</li>
    		</ol>
    	</li>
    	<li>Node</li>
    	<li>Node</li>
    </ol>
    
    ol{counter-reset: item;}
    li:before{counter-increment: item; content: counters(item,".");}
    
    <ol>
      <li>
         <ol> 
            <li></li>
            <li></li>
            <li></li> 
          </ol>
      </li>
      <li></li>
      <li></li>
      <li>
         <ol> 
            <li></li>
            <li>
               <ol> 
                  <li></li>
                  <li></li>
                  <li></li> 
               </ol>
            </li>
          </ol>
      </li>
    </ol>
    
    
    ol {
      counter-reset: listcounter;
    }
    li {
      counter-increment: listcounter;
    }
    li::marker {
       content:  counters(listcounter, '.', upper-roman) ') ';
    }
    li::before {
      content:  counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ;
    }
    
    <ol>
      <li>
         <ol> 
            <li></li>
            <li></li>
            <li></li> 
          </ol>
      </li>
      <li></li>
      <li></li>
      <li>
         <ol> 
            <li></li>
            <li>
               <ol> 
                  <li></li>
                  <li></li>
                  <li></li> 
               </ol>
            </li>
          </ol>
      </li>
    </ol>
    
    ol {
      counter-reset: count;
    }
    li {
      counter-increment: count;
    }
    li::marker { 
       content: counters(count, '.', upper-alpha) ') '; 
    }
    li::before {
      content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
    }
    
    <!DOCTYPE html>
    <html lang="zh-cmn-hans">
    <head>
    <meta charset="utf-8"/>
    
    <style>
    ol{
    	margin:0;
    	padding:0002em;
    	list-style:none;
    	counter-reset:item;
    }
    li:before{
    	counter-increment:item;
    	content:counters(item,".");
    	color:#f00;
    }
    </style>
    </head>
    <body>
    <olclass="test">
    	<li>node
    		<ol>
    			<li>node
    				<ol>
    					<li>node</li>
    					<li>node</li>
    					<li>node</li>
    				</ol>
    			</li>
    			<li>node</li>
    		</ol>
    	</li>
    	<li>node</li>
    	<li>node</li>
    </ol>
    </body>
    </html>

    效果图:

    上篇:counter()

    下篇:@counter-style