CSS可以通過自動生成序號的功能，便捷地實現列表排版與樣式的設計。接下來，我們通過一組案例來了解CSS自動生成序號的基本操作。

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

上述代碼是一個基本的無序列表結構。在使用CSS自動生成序號之前，我們需要先清除默認樣式，并為列表項添加一個類名以便定位。

ul {
list-style: none;
}
ul li.item {
counter-increment: num;
}
ul li.item::before {
content: counter(num) ".";
margin-right: 10px;
}

上面這段代碼是實現自動生成序號的核心代碼。我們通過counter-increment屬性來給列表項計數，同時在偽元素::before的content屬性中使用counter()函數來生成序號，并在后面添加一個小數點和一些空白以美化視覺效果。

最后，我們只需要將類名添加到HTML中即可：

<ul>
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item">JavaScript</li>
</ul>

通過上述步驟，我們成功地實現了無序列表自動生成序號的效果。除此之外，我們還可以將上述代碼通過微調等操作應用到有序列表或多級列表等更為復雜的結構。