CSS 排名列表是一個在網站中非常實用和常見的組件，通常用于展示產品、文章和其他信息的排名和評級。下面我們來學習一下如何使用 CSS 來創建排名列表。

/* 1. 首先，定義排名列表的基本樣式 */
ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: rank; /* 重置計數器 */
}
/* 2. 為每一個列表項定義樣式 */
ol li {
position: relative;
margin-bottom: 20px;
padding-left: 50px;
}
/* 3. 為每一個列表項定義背景和計數器 */
ol li::before {
content: counter(rank);
counter-increment: rank; /* 每個列表項遞增 */
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 24px;
color: #fff;
background-color: #666;
border-radius: 50%;
}
/* 4. 為第1名和第2名分別定義不同的背景顏色和樣式 */
ol li:first-child::before {
background-color: #ff0000;
font-size: 30px;
}
ol li:nth-child(2)::before {
background-color: #ffa500;
font-size: 26px;
}

通過上面的 CSS 樣式，我們可以輕松地創建一個帶有計數器和樣式的排名列表，并將1、2名的樣式區別開來，頁面的效果非常好。