css counter-increment属性怎么用

互联网 19-5-29

counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

说明

利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。

注释：如果使用了 "display: none"，则无法增加计数。如使用 "visibility: hidden"，则可增加计数。

值

描述

id 定义将增加计数的选择器、id 或 class。

number 定义增量。number 可以是正数、零或者负数。

实例

对部分和子部分进行编号（比如 "Section 1"、"1.1"、"1.2"）的方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css">     body {counter-reset:section;}     h1 {counter-reset:subsection;}     h1:before     {     counter-increment:section;     content:"Section " counter(section) ". ";     }     h2:before      {     counter-increment:subsection;     content:counter(section) "." counter(subsection) " ";     } </style> </head>  <body>      <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。</p>          <h1>HTML tutorials</h1>     <h2>HTML Tutorial</h2>     <h2>XHTML Tutorial</h2>     <h2>CSS Tutorial</h2>          <h1>Scripting tutorials</h1>     <h2>JavaScript</h2>     <h2>VBScript</h2>          <h1>XML tutorials</h1>     <h2>XML</h2>     <h2>XSL</h2>  </body> </html>

以上就是css counter-increment属性怎么用的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： css