CSS Counters: 帶領你的網頁走向秩序

你好啊，未來的網頁設計魔法師們！今天，我們將要深入探索 CSS counters 的迷人世界。作為你們親切友善的鄰居電腦老師，我非常興奮能夠帶領你們踏上這次旅程。相信我，等到這個教學結束時，你將會像專家一樣計數元素！

CSS - Counters

CSS Counters 是什麼？

想像你正在籌備一個大型派對（啊，那些日子已經遠去，在我成為全職的編程愛好者之前！）。你想要為所有的桌子編號，讓來賓能夠輕鬆找到他們的座位。CSS counters 就像你的數字化派對助手，能夠自動為你的網頁元素編號。酷炫吧？

讓我們從一個簡單的例子開始：

body {
counter-reset: section;
}

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

<h2>Introduction</h2>
<h2>Main Content</h2>
<h2>Conclusion</h2>

在這個例子中，我們告訴 CSS 要：

在 body 開始處啟動一個名為 "section" 的計數器。
每當看到 <h2> 標籤時，增加這個計數器。
在每個 <h2> 之前加上 "Section X: "，其中 X 是我們當前的計數。

結果如何？你的 <h2> 標籤將會自動編號為 "Section 1: Introduction"、"Section 2: Main Content" 等等。這就像魔法一樣，但更好，因為你就是那位魔法師！

CSS Counters - 嵌套計數器

現在，讓我們升級一個層次。如果你正在寫一本教科書（或者一篇非常非常長的教學），你想要子節？CSS counters 會全力支持你！

body {
counter-reset: chapter;
}

h1 {
counter-reset: section;
}

h1::before {
counter-increment: chapter;
content: "Chapter " counter(chapter) ". ";
}

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

<h1>Getting Started with CSS</h1>
<h2>What is CSS?</h2>
<h2>CSS Syntax</h2>
<h1>Advanced CSS Techniques</h1>
<h2>Flexbox</h2>
<h2>Grid</h2>

這段代碼創建了一個嵌套的計數器結構。我們在每次遇到新的章節（h1）時重置 "section" 計數器。結果？一個美麗的、自動編號的結構，如下所示：

Chapter 1. Getting Started with CSS 1.1 What is CSS? 1.2 CSS Syntax Chapter 2. Advanced CSS Techniques 2.1 Flexbox 2.2 Grid

就像有一個微小、無形的圖書管理員在為你的內容進行整理！

CSS Counters - 逆向計數器

有時候，我們想要倒數。也許你正在創建一個大事件的倒數計時（比如一個新的 CSS 規範的發布——哦，那種興奮！）。CSS 為我們提供了 counter-increment 屬性：

ol {
counter-reset: my-awesome-counter 5;
}

li {
counter-increment: my-awesome-counter -1;
}

li::before {
content: counter(my-awesome-counter) ") ";
}

<ol>
<li>Launch the rocket</li>
<li>Deploy the parachute</li>
<li>Land safely</li>
<li>Celebrate</li>
<li>Write CSS</li>
</ol>

這將創建一個倒數計時列表：

Launch the rocket
Deploy the parachute
Land safely
Celebrate
Write CSS

因為，我們得承認，編寫 CSS 永遠是最終目標！

語法

現在，讓我們分解 CSS counters 的語法。別擔心，這比解讀你祖母的秘密食譜要容易多了！

屬性	描述	示例
`counter-reset`	初始化或重置一個計數器	`counter-reset: my-counter 0;`
`counter-increment`	增加或減少一個計數器	`counter-increment: my-counter 1;`
`counter()`	返回計數器的當前值	`content: counter(my-counter);`
`counters()`	結合嵌套計數器	`content: counters(my-counter, ".");`

CSS Counter - 相關屬性

為了充分利用 CSS counters，你將需要熟悉以下這些相關屬性：

content：這裡就是魔法發生的地方。你使用它來顯示你的計數器值。

li::before {
content: counter(item) ". ";
}

list-style-type：雖然這個屬性不是直接與計數器相關，但它可以與計數器一起使用，產生一些非常酷的效果。

ol {
list-style-type: none;
}

::before 和 ::after 虛擬元素：這些是你的最佳夥伴，當你使用計數器時。它們允許你在元素之前或之後插入內容。

h2::before {
content: "Section " counter(section) ": ";
}

記住，熟練才能精通！嘗試以不同的方式組合這些屬性。誰知道？你可能會發明網頁設計中的下一個大熱門！

總結來說，CSS counters 是一個強大的工具，當你創建有結構的內容時，可以節省你的時間和精力。它們就像一群微型機器人為你編號頁面一樣。而最棒的是？它們從不會感到疲憊或要求休息！

所以，勇往直前，無畏計數，願你的計數器總是為你增長！

Credits: Image by storyset