CSS實現排序是網頁設計中非常常見的操作。通過使用CSS，我們可以輕松地對網頁中的內容進行排序，幫助用戶快速地找到他們需要的信息。

/* CSS代碼實現排序 */
ol {
list-style: none;
counter-reset: li;
padding: 0;
margin: 0;
}
li {
display: block;
margin-bottom: .5em;
position: relative;
padding-left: 1em;
}
li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1em;
}

在以上代碼中，我們先通過`ol`選擇器來對有序列表進行全局樣式的設置，然后通過`li`選擇器對列表項進行樣式設置。具體樣式設置如下：

• 給有序列表去掉默認的樣式，通過`list-style`屬性設為`none`
• 重置計數器，通過`counter-reset`設為`li`
• 去掉`ol`的內外邊距，通過`padding`和`margin`設為`0`
• 將每一個列表項設為塊級元素，通過`display`設為`block`，并設置上下外邊距為`.5em`，使得每個列表項之間有一定的距離
• 設置列表項內部文字離左側的距離（可以是數字或長度單位或百分比），通過`padding-left`設為`1em`

為了實現序號的顯示，我們使用了CSS偽元素`::before`。具體樣式設置如下：

• 設置偽元素的內容，通過`content`設為計數器`li`的值
• 使計數器加一，通過`counter-increment`設為`li`
• 將偽元素設為絕對定位，通過`position`設為`absolute`
• 設置偽元素距左側的距離，通過`left`設為`-1em`，使得序號和列表項文字對齊

通過以上樣式設置，我們就可以實現一個基本的排序效果啦！