溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css中counter-increment屬性的使用方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
counter-increment 屬性設置某個選取器每次出現的計數器增量。默認增量是 1。
說明
利用這個屬性，計數器可以遞增（或遞減）某個值，這可以是正值或負值。如果沒有提供 number 值，則默認為 1。
注釋：如果使用了 "display: none"，則無法增加計數。如使用 "visibility: hidden"，則可增加計數。
| 值 | 描述 |
| none | 默認。選擇器無計數器增量。 |
| id number | id 定義將增加計數的選擇器、id 或 class。 number 定義增量。number 可以是正數、零或者負數。 |
| inherit | 規定應該從父元素繼承 counter-increment 屬性的值。 |
實例
對部分和子部分進行編號（比如 "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;}
h2 {counter-reset:subsection;}
h2:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h3:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<p><b>注釋：</b>如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 屬性。</p>
<h2>HTML tutorials</h2>
<h3>HTML Tutorial</h3>
<h3>XHTML Tutorial</h3>
<h3>CSS Tutorial</h3>
<h2>Scripting tutorials</h2>
<h3>JavaScript</h3>
<h3>VBScript</h3>
<h2>XML tutorials</h2>
<h3>XML</h3>
<h3>XSL</h3>
</body>
</html>關于css中counter-increment屬性的使用方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
