CSS 偽類是 CSS 中一項非常重要的技術(shù)，如何使用它來實現(xiàn)一些特殊的效果也是我們在相應(yīng)的前端開發(fā)過程中需要了解掌握的內(nèi)容之一。其中，點擊變色效果就是非常實用的一種，可以讓用戶在點擊某個元素時，更加直觀地感受到這一操作的效果。

// 在 CSS 文件中定義點擊變色的效果
li:hover {
background-color: #ccc;
}
li:active {
background-color: red;
}

上述代碼中，我們使用了兩個偽類，分別是:hover和:active。其中，:hover偽類表示當(dāng)鼠標(biāo)懸停在某個元素上時所觸發(fā)的效果，我們在此將其設(shè)置為將背景色變?yōu)榛疑欢?active偽類則代表了當(dāng)用戶按下某個元素時所觸發(fā)的效果，我們在此將其設(shè)置為將背景色變?yōu)榧t色。

在 HTML 文件中，我們需要將需要使用此效果的元素使用li標(biāo)簽進行包裹。

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>

當(dāng)我們在瀏覽器中打開此頁面時，就可以通過鼠標(biāo)懸停和點擊列表項來實現(xiàn)相應(yīng)的變色效果了。

總結(jié)來說，使用 CSS 偽類來實現(xiàn)點擊變色的效果十分方便，僅需幾行代碼就可以實現(xiàn)。同時，該技術(shù)還具有很大的擴展性，可以結(jié)合 JavaScript 等其他技術(shù)來實現(xiàn)更加復(fù)雜的效果。