今天我們來(lái)討論一下純CSS3有序列表樣式。有序列表是常見(jiàn)的文本排版方式，相信大家都有使用過(guò)。那么，如何用CSS3來(lái)實(shí)現(xiàn)有序列表樣式呢？ 首先我們需要明確有序列表的結(jié)構(gòu)。有序列表的結(jié)構(gòu)一般是這樣的：

<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ol>

上面的代碼中，`

`表示有序列表，`
1. `表示列表項(xiàng)，其中的數(shù)字就是由CSS控制的。接下來(lái)，我們看看如何使用CSS來(lái)控制這個(gè)數(shù)字。

   ol {
   list-style: none;
   counter-reset: number;
   }
   li {
   counter-increment: number;
   }
   li:before {
   content: counter(number) ".";
   margin-right: 5px;
   }

   在上面的代碼中，我們?cè)O(shè)置了`list-style: none`，這樣就隱藏了默認(rèn)的數(shù)字樣式。然后使用`counter-reset: number`來(lái)設(shè)置一個(gè)計(jì)數(shù)器，并將其命名為`number`。接著，在`li`中使用`counter-increment: number`來(lái)讓計(jì)數(shù)器每經(jīng)過(guò)一個(gè)`li`就自增1。最后，在`li:before`偽元素中使用`content: counter(number) "."`來(lái)顯示當(dāng)前的數(shù)字，這里的`.`是一個(gè)分隔符，我們可以自己定義。 這種方式也允許我們通過(guò)CSS來(lái)定制我們想要的數(shù)字樣式。例如，如果我們想要使用羅馬數(shù)字，可以這樣設(shè)置：

   ol {
   list-style: none;
   counter-reset: roman;
   }
   li {
   counter-increment: roman;
   }
   li:before {
   content: counter(roman, lower-roman) ".";
   margin-right: 5px;
   }

   在這里，我們將計(jì)數(shù)器命名為`roman`，然后在`li:before`中使用`counter(roman, lower-roman)`來(lái)顯示羅馬數(shù)字，其中的`lower-roman`表示小寫(xiě)羅馬數(shù)字。 綜上所述，純CSS3有序列表樣式的實(shí)現(xiàn)其實(shí)非常簡(jiǎn)單，只需要使用`counter`計(jì)數(shù)器即可。我們可以根據(jù)自己的需要，設(shè)置不同的數(shù)字樣式，從而達(dá)到更豐富的排版效果。