CSS counter計數器類似于變量。這些由CSS維護，并且這些值可以由CSS規(guī)則遞增以跟蹤它們的使用次數。其主要用途是，可以通過指定的規(guī)則來計算節(jié)點元素的使用次數。
CSS counter計數器有助于基于CSS的簡單遞增和顯示生成內容的數字。
以下是與CSS計數器一起使用的屬性的列表：
counter-reset：用于創(chuàng)建或重置計數器。
counter-increment：用于增加計數器值。
content：用于插入生成的內容。
counter()或counters()函數：用于將計數器的值添加到元素。
讓我們舉個實例，為頁面創(chuàng)建一個計數器，并為每個下一個元素增加計數器的值。
請參閱以下示例：
<!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>測試看看?/?您也可以在計數器內創(chuàng)建計數器。這稱為計數器嵌套。讓我們以一個示例來演示嵌套計數器。
請參閱以下示例：
<!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>測試看看?/?注意：在以上示例中，您可以看到為該節(jié)創(chuàng)建了一個計數器，并在該節(jié)中創(chuàng)建了另一個名為subsection的嵌套計數器。
您可以使用嵌套計數器創(chuàng)建輪廓列表。它有助于您在不同級別的嵌套計數器之間插入字符串。
請參閱以下示例：
<!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>測試看看?/?