自動帶序號 CSS 可以讓我們更方便地為列表、文章標題等元素進行編號。下面我們來介紹一下如何使用這個特性。
首先,我們需要在 CSS 樣式文件中添加以下代碼:
```
ol {
counter-reset: item;
list-style: none;
}
li:before {
content: counter(item) ". ";
counter-increment: item;
}
```
這段代碼中,我們使用了 `counter-reset` 屬性將計數器 `item` 歸零,并使用 `list-style` 屬性將列表原有的項目符號去除。隨后,在 `li` 元素之前插入了帶有自動編號的偽元素,通過 `counter` 屬性和 `content` 屬性來進行設置。
接下來,我們可以在 HTML 文件中使用 `ol` 和 `li` 標簽來創建帶有自動編號的列表:
```
- 第一項
- 第二項
- 第三項