在網站或應用中，我們經常會看到星星評分的功能，它可以讓用戶快速評價某個產品或服務的質量。如何使用 CSS 實現這一功能呢？下面我們來看一下具體實現方法。

.star-rating {
display: inline-block;
font-size: 0;
width: 120px; /* 星星的寬度 */
height: 24px; /* 星星的高度，根據需要自行調整 */
position: relative;
cursor: pointer;
}
.star-rating:before {
content: '\2605\2605\2605\2605\2605'; /* 五個星星 */
font-size: 24px; /* 星星的大小，根據需要自行調整 */
position: absolute;
top: 0;
left: 0;
color: #ccc;
}
.star-rating:after {
content: '\2605\2605\2605\2605\2605'; /* 五個星星 */
font-size: 24px; /* 星星的大小，根據需要自行調整 */
position: absolute;
top: 0;
left: 0;
color: #ffcc00; /* 設置亮色的星星 */
overflow: hidden;
width: 0;
}
.star-rating:hover:after,
.star-rating:hover ~ .star-rating:after,
.star-rating:checked ~ .star-rating:after { /* 當鼠標經過或選中時，顯示亮色的星星 */
width: 100%;
}

以上代碼中，通過設置偽元素:before和:after，分別生成灰色的星星和亮色的星星。通過控制:after的寬度，實現選中星星的效果。我們還可以利用:hover偽類來實現鼠標懸停效果。另外，通過設置position: relative;，讓星星容器可以自由定位。

以上就是使用 CSS 實現星星評分的方法。通過簡單的 CSS 代碼，我們就可以實現一個可交互的星星評分功能。這是 CSS 所具備的強大能力之一，也是我們必須掌握的基礎技能之一。