讓咱們學會使用 CSS 計數器

做者：Ahmad shaded
譯者：前端小智
來源：sitepoint

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

我看來，CSS計數器在web上尚未獲得充分利用，儘管它們的支持很是好(IE8+)!。在本文中，我將解釋如何在項目中使用CSS計數器，以及一些用例。

什麼是CSS計數器

　　計數器是css3提供的一個強大的工具，是一種可讓咱們使用CSS給元素自動編號的方法。使用它能夠很方便對頁面中的任意元素進行計數，實現相似於有序列表的功能。但與有序列表相比，css計數器能夠對任意元素計數，同時還能夠實現個性化計數。

CSS 計數器的相關屬性

CSS 計數器須要三個屬性，分別是：

• counter-reset
• counter-increment
• counter()

counter-reset

counter-reset：屬性用於定義和初始化一個或多個CSS計數器。它能夠使用一個或多個標識符做爲值，該值指定計數器的名稱。

使用語法：counter-reset:[<標識符><整數>?]+|none|inherit

每一個計數器名稱後面均可以跟一個可選的<整數>值，該值指定計數器的初始值。

注意：

1. 關鍵字none，inherit和initial不能做爲計數器名稱；關鍵字none，inherit能夠做爲計counter-reset屬性的值。設置none將取消設置計數器；設置inherit將從元素的父元素處繼承counter-reset值。該counter-reset屬性的默認值爲none。
2. 計數器的初始值不是計數器顯示時的第一個數字/值。這意味着若是但願計數器從1開始顯示，則須要將counter-reset中的初始值設置爲零。0是默認的初始值，因此若是省略它，默認狀況下它將重置爲零；counter-reset容許使用負值。所以，若是但願計數器從零開始顯示，能夠將其初始值設置爲-1。

counter-increment

counter-increment屬性用於指定一個或多個CSS計數器的增量值。它將一個或多個標識符做爲值，指定要遞增的計數器的名稱。

使用語法：counter-increment:[<標識符><整數>?]+|none|inherit

每一個計數器名稱（標識符）後面均可以跟一個可選<整數>值，該值指定對於咱們所編號的元素每次出現時，計數器須要遞增多少。默認增量爲1。容許零和負整數。若是指定了負整數，則計數器被遞減。

counter-increment屬性必須和counter-reset屬性配合使用。

counter() 函數

counter()函數必須和content屬性一塊兒使用，用來顯示CSS計數器。它以CSS計數器名稱做爲參數，並做爲值傳遞給content屬性，而content屬性就會使用:before僞元素將計數器顯示爲生成的內容。

counters()函數也有兩種形式：counters(name,string)和counters(name,string,style)。

name參數也是要顯示的計數器的名稱。能夠使用counter-reset屬性來指定計數器的名稱。而counters()函數與counter()函數（單數形式）區別在於：counters()函數能夠用於設置嵌套計數器。

嵌套計數器是用於爲嵌套元素（如嵌套列表）提供自動編號。若是你要將計數器應用於嵌套列表，則能夠對第一級項目進行編號，例如，1，2，3等。第二級列表項目將編號爲1.1，1.2，1.3等。第三級項目將是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。

string參數用做不一樣嵌套級別的數字之間的分隔符。例如，在'1.1.2'中，點（'.'）用於分隔不一樣的級別編號。若是咱們使用該counters()函數將點指定爲分隔符，則它可能以下所示：

content:counters(counterName,".");

　若是但願嵌套計數器由另外一個字符分隔，例如，若是但願它們顯示爲「1-1-2」，則能夠使用短劃線而不是點做爲字符串值：

　content:counters(counterName,"-");

和counter()函數同樣，style參數是用來定義計數器的風格。默認狀況下，計數器使用十進制數字格式化。具體關於style參數的設置能夠參照counter()函數的style參數。

如何添加計數器

1. 爲計數器選擇一個名稱

假設咱們有下面的 HTML:

<div class="content">
    <h2>Section</>
    <p><!-- Description --></p>

    <h2>Section</>
    <p><!-- Description --></p>

    <h2>Section</>
    <p><!-- Description --></p>
</div>

我想給每一個title元素添加一個數字。爲此，我將在父元素上定義一個計數器。

.content {
    counter-reset: section;
}

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

2.遞增計數器

這一步對於計數器的工做很是重要。在<h2>元素上，我將建立一個before僞元素，它將用於顯示計數器的值。

h2:before {
    counter-increment: section;
}

3.分配計數器

最後一步是使用counter()函數做爲content屬性的值。 如今，添加了如下內容：

h2:before {
    counter-increment: section;
    content: counter(section);
}

接着，爲before僞元素添加一些樣式，讓它看起來漂亮點：

事件源碼：https://codepen.io/shadeed/pe...

CSS 計數器用例

動態章節標題

根據前面的示例，咱們能夠編輯before僞元素，以下所示

h2:before {
  counter-increment: section;
  content: "Section " counter(section);
  display: block;
  max-width: 80px;
  font-size: 14px;
  font-weight: normal;
  background-color: rgba(#0277bd, 0.2);
  border-radius: 20px;
  text-align: center;
  padding: 6px 8px;
  margin-bottom: 0.75rem;
}

事件源碼：https://codepen.io/shadeed/pe...

嵌套計數器

假設咱們有如下列表:

<ul class="services">
    <li class="services__item">Design
      <ul>
        <li>Web</li>
        <li>Mobile</li>
        <li>Graphic</li>
      </ul>
    </li>
    <li class="services__item">Web Development</li>
    <li class="services__item">Mobile Development
      <ul>
        <li>iOS</li>
        <li>Android</li>
        <li>Windows Phone</li>
      </ul>
    </li>
</ul>

咱們想讓一級顯示 「1.」,二級對應「1.1」 。爲此，咱們應該執行如下操做：

/* Defining a counter for the main list items */
.services {
    counter-reset: services;
}

.services__item:before {
    counter-increment: services;
    content: counter(services) ".";
}

/* Defining a counter for the sub lists */
.services__item ul {
    counter-reset: sub-services;
}

.services__item li:before {
    counter-increment: sub-services;
    content: counter(services) "." counter(sub-services);
}

事例源碼：https://codepen.io/shadeed/pe...

---

原文：https://ishadeorddeed.com/art...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。