CSS 排名列表是一個(gè)在網(wǎng)站中非常實(shí)用和常見(jiàn)的組件，通常用于展示產(chǎn)品、文章和其他信息的排名和評(píng)級(jí)。下面我們來(lái)學(xué)習(xí)一下如何使用 CSS 來(lái)創(chuàng)建排名列表。

/* 1. 首先，定義排名列表的基本樣式 */
ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: rank; /* 重置計(jì)數(shù)器 */
}
/* 2. 為每一個(gè)列表項(xiàng)定義樣式 */
ol li {
position: relative;
margin-bottom: 20px;
padding-left: 50px;
}
/* 3. 為每一個(gè)列表項(xiàng)定義背景和計(jì)數(shù)器 */
ol li::before {
content: counter(rank);
counter-increment: rank; /* 每個(gè)列表項(xiàng)遞增 */
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;
}

通過(guò)上面的 CSS 樣式，我們可以輕松地創(chuàng)建一個(gè)帶有計(jì)數(shù)器和樣式的排名列表，并將1、2名的樣式區(qū)別開(kāi)來(lái)，頁(yè)面的效果非常好。