在嵌套的網頁中使用css計數器創建網站編號

作者：佚名   時間：2014-03-24   分享到：

在嵌套的文檔中使用css計數器

如果沒有在文檔中顯示計數器的值，創建它們就沒有什么用處。這種顯示不是是自動實現的。為了顯示計數器，要在當前屬性中使用特殊的counter()和counters()值。

counter()值要求圓括號內是計數器的名稱，并帶有可選的格式聲明。然后瀏覽器在生成的內容中以希望的格式顯示指定的計數器。格式可以是任何list-style-type屬性接受的列表格式，如節所描述的一樣。

例如，為了實際顯示編號章節的編號，我們擴展了用于<h1>和<h2>元素的樣式規則：

h1:before{counter-increment: chapter; counter-reset: section;
content: "chapter" counter(chapter)":"}
h2:before{counter-increment: section;
content: "section" counter(section)":"}

然后，當支持css2的瀏覽器在文檔中遇到下列代碼時：

<h1>在嵌套的文檔中使用css計數器</h1>

它會將其顯示為：

chapter 1 在嵌套的文檔中使用css計數器

如果要例用羅馬數字為我們的章編號，就會將屬性改變為：

h1:before{counter-increment: chapter; counter-reset: section;
content: "chapter" counter(chapter,upper-roman) ":"}
h2:before{counter-increment:section;
content: "section" counter(section, lower-roman)":"}

counter()值是當前嵌套層中計數器的值。如果要訪問所有嵌套層上周名計數器的所有值，就要使用復數形式的characters()值。在圓括號和分隔符字符串中要包括計數器的名稱。瀏覽器將顯示中計數器的分隔符字符串放在每個值列表之間。還可以提供一種格式類型從摩爾的十進制編號切換過來。

在創建嵌套的編號列表時，counters()值是最有用的。請考慮下列屬性:

ol{counter-reset: item} li:before{counter-increment: item;
content: counters(item,".")

如果在文檔中嵌套多個<ol>元素，每個<li>都會包括所有嵌套的值，并用句點分開。這就會生成“1，1.1，1.1.1”等此類嵌套增加的熟悉的編號模式。