在現代網頁設計中，CSS選擇器是非常重要的一部分。我們常常會添加許多無用的樣式到我們的CSS樣式表中。這些無用的樣式會占用寶貴的網絡帶寬并且會使頁面更慢。除此之外，無用的樣式也會讓我們的樣式表更難以維護。

清理無用的樣式通常是一個非常耗時的過程。但近年來，出現了許多CSS代碼清理工具。這些工具可以幫助我們快速識別出無用的樣式，并將它們從樣式表中刪除。

現在，我們將學習如何使用PurgeCSS工具清理我們的CSS樣式表中的無用樣式。

/* 原始的CSS樣式表 */
.header {
background-color: #333;
color: white;
font-size: 28px;
}
.button {
background-color: black;
color: white;
font-size: 16px;
padding: 10px;
}
.body-text {
color: grey;
font-size: 16px;
margin: 0;
}
.unused-style {
font-weight: bold;
text-decoration: underline;
}

在這個例子中，.unused-style樣式是無用的樣式，它沒有被任何元素使用。我們可以使用PurgeCSS輕松清理掉它。

首先，安裝PurgeCSS：

npm install purgecss -g

接下來，我們可以運行以下命令：

purgecss --css style.css --content index.html

其中，--css參數告訴PurgeCSS要清理哪個CSS文件，--content參數告訴PurgeCSS要清理哪個HTML文件。如果您不知道如何運行這些命令，可以參考PurgeCSS官方文檔。

在運行命令后，PurgeCSS會輸出以下內容：

.header {
background-color: #333;
color: white;
font-size: 28px;
}
.button {
background-color: black;
color: white;
font-size: 16px;
padding: 10px;
}
.body-text {
color: grey;
font-size: 16px;
margin: 0;
}

可以看到，.unused-style已經被成功清理掉了。

總的來說，清理無用的CSS樣式是一個很好的實踐。這有助于我們提高網頁加載速度并使CSS樣式表更容易維護。PurgeCSS是一個很好的工具，它可以幫助我們自動清理掉無用的樣式。