CSS是一項非常實用的技術，它可以幫助我們為文本添加各種樣式。在網頁設計中，我們經常需要給有序列表（<ol>）和無序列表（<ul>）的每個列表項（<li>）加上序號。在傳統的HTML中，我們可以使用type屬性來定義列表項的序號類型。但是，如果我們想要更靈活、更方便地控制序號，我們可以使用CSS來實現它。

下面是一段示例代碼，它展示了如何使用CSS為無序列表添加序號：

<ul class="my-list">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>

.my-list {
counter-reset: my-counter;
list-style: none;
}
.my-list li:before {
content: counter(my-counter) ". ";
counter-increment: my-counter;
}

通過上面的CSS代碼，我們實現了以下效果：

• 列表項1
• 列表項2
• 列表項3

我們使用了counter-reset屬性來定義一個新的計數器my-counter，并在ul元素上設置了list-style: none;，隱藏了默認的列表項標志。接著，我們使用li:before偽元素來為每個列表項添加序號。在content屬性中，我們使用了counter()函數來獲取計數器的值，并在后面加上一個"."和空格，即“1. ”、“2. ”等。最后，我們使用counter-increment屬性來增加計數器的值。

如果我們想為有序列表添加序號，也是一樣的道理。下面是一個示例代碼：

<ol class="my-list">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ol>

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

我們只需要將list-style設置為默認的有序列表樣式就行了。而在偽元素:before中，我們使用了counters()函數來獲取整個計數器列表，這樣就可以顯示類似“1.1.”、“1.2.”等效果了。

總結來說，CSS為我們實現列表項序號提供了更靈活、更方便的解決方案。通過counter-reset、counter-increment和counters()等屬性和函數，我們可以輕松地控制序號的格式和顯示方式。這為我們的網頁設計帶來了更多的可能性。