小白教程
所有教程
关于
Search
172.70.126.200
172.70.126.200
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 计数器”的源代码
本页内容
上一节:
CSS_表单
下一节:
CSS_网页布局
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS 计数器}}[[Category:CSS 教程|36]] = CSS 计数器 = CSS 计数器通过一个变量来设置,根据规则递增变量。 == 使用计数器自动编号 == CSS 计数器根据规则来递增变量。 CSS 计数器使用到以下几个属性: * <code>counter-reset</code> - 创建或者重置计数器 * <code>counter-increment</code> - 递增变量 * <code>content</code> - 插入生成的内容 * <code>counter()</code> 或 <code>counters()</code> 函数 - 将计数器的值添加到元素 要使用 CSS 计数器,得先用 counter-reset 创建: 以下实例在页面创建一个计数器 (在 body 选择器中),每个 <h2> 元素的计数值都会递增,并在每个 <h2> 元素前添加 "Section <计数值>:" == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; } </style> </head> <body> <h1>使用 CSS 计数器:</h1> <h2>HTML 教程</h2> <h2>CSS 教程</h2> <h2>JavaScript 教程</h2> <p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p> </body> </html> </run> == 嵌套计数器 == 以下实例在页面创建一个计数器,在每一个 <h1> 元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在 <h2> 元素的前面,内容为 "<主标题计数值>.<副标题计数值>": == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> 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) " "; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> 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> <h1>HTML 教程:</h1> <h2>HTML 教程</h2> <h2>CSS 教程</h2> <h1>Scripting 教程:</h1> <h2>JavaScript</h2> <h2>VBScript</h2> <h1>XML 教程:</h1> <h2>XML</h2> <h2>XSL</h2> <p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p> </body> </html> </run> 计数器也可用于列表中,列表的子元素会自动创建。这里我们使用了 <code>counters()</code> 函数在不同的嵌套层级中插入字符串: == CSS 实例 == <sample title="" desc="" lang="html" hererun="1"> ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; } </style> </head> <body> <ol> <li>item</li> <li>item <ol> <li>item</li> <li>item</li> <li>item <ol> <li>item</li> <li>item</li> <li>item</li> </ol> </li> <li>item</li> </ol> </li> <li>item</li> <li>item</li> </ol> <ol> <li>item</li> <li>item</li> </ol> <p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p> </body> </html> </run> == CSS 计数器属性 == {| class="table table-striped table-hover" ! 属性 ! 描述 |- | [[pr gen content|content]] | 使用 ::before 和 ::after 伪元素来插入自动生成的内容 |- | [[pr gen counter increment|counter-increment]] | 递增一个或多个值 |- | [[pr gen counter reset|counter-reset]] | 创建或重置一个或多个计数器 |}
返回至“
CSS 计数器
”。
上一节:
CSS_表单
下一节:
CSS_网页布局