CSS counter计数器类似于变量。这些由CSS维护,并且这些值可以由CSS规则递增以跟踪它们的使用次数。其主要用途是,可以通过指定的规则来计算节点元素的使用次数。
CSS counter计数器有助于基于CSS的简单递增和显示生成内容的数字。
以下是与CSS计数器一起使用的属性的列表:
counter-reset:用于创建或重置计数器。
counter-increment:用于增加计数器值。
content:用于插入生成的内容。
counter()或counters()函数:用于将计数器的值添加到元素。
让我们举个实例,为页面创建一个计数器,并为每个下一个元素增加计数器的值。
请参阅以下示例:
<!DOCTYPE html> <html> <head> <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; } </style> </head> <body> <h1>CSS Counters计数器示例:</h1> <h2>Java Tutorial</h2> <h2>HTML Tutorial</h2> <h2>CSS Tutorial</h2> <h2>Oracle Tutorial</h2> <p><strong>Note:</strong> IE8 浏览器下使用需声明!DOCTYPE.</p> </body> </html>测试看看‹/›
您也可以在计数器内创建计数器。这称为计数器嵌套。让我们以一个示例来演示嵌套计数器。
请参阅以下示例:
<!DOCTYPE html> <html> <head> <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>Java tutorials:</h1> <h2>Core Java tutorial</h2> <h2>Servlet tutorial</h2> <h2>JSP tutorial</h2> <h2>Spring tutorial</h2> <h2>Hibernate tutorial</h2> <h1>Web technology tutorials:</h1> <h2>HTML tutorial</h2> <h2>CSS tutorial</h2> <h2>jQuery tutorial</h2> <h2>Bootstrap tutorial</h2> <h1>Database tutorials:</h1> <h2>SQL tutorial</h2> <h2>MySQL tutorial</h2> <h2>PL/SQL tutorial</h2> <h2>Oracle tutorial</h2> <p><strong>Note:</strong> 只有在指定了!DOCTYPE的情况下,IE8才支持这些属性。</p> </body> </html>测试看看‹/›
注意:在以上示例中,您可以看到为该节创建了一个计数器,并在该节中创建了另一个名为subsection的嵌套计数器。
您可以使用嵌套计数器创建轮廓列表。它有助于您在不同级别的嵌套计数器之间插入字符串。
请参阅以下示例:
<!DOCTYPE html> <html> <head> <style> ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; } </style> </head> <body> <h2>不同的嵌套级别的计数器</h2> <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> <p><strong>Note:</strong> 只有在指定了!DOCTYPE的情况下,IE8才支持这些属性。</p> </body> </html>测试看看‹/›