CSS是用來美化網頁的語言，我們可以利用它來改變頁面的顏色、字體大小、邊距以及很多其他的樣式。其中一個常見的效果就是當我們鼠標點擊對象時，能夠改變該對象的背景顏色或者邊框顏色。現在我們就來學習一下如何使用CSS創建鼠標點擊后改變顏色的效果。

/* HTML代碼 */
<div id="box"></div>
/* CSS代碼 */
#box {
width: 200px;
height: 200px;
background-color: #ccc;
}
#box:hover {
background-color: #f00;
}

在上面的代碼中，我們首先定義了一個DIV元素，并設置了它的寬高和背景色。然后我們使用:hover偽元素來指定當鼠標懸浮在該元素上時要應用的樣式。在本例中，我們將背景色改為了紅色。

除了使用:hover偽元素，我們還可以使用:active偽元素來指定當鼠標點擊該元素時要應用的樣式。下面是一個例子：

/* HTML代碼 */
<div id="box"></div>
/* CSS代碼 */
#box {
width: 200px;
height: 200px;
background-color: #ccc;
}
#box:active {
background-color: #f00;
}

在這個例子中，我們使用了:active偽元素來指定當鼠標點擊該元素時要應用的背景色為紅色。當我們點擊該元素時，它的背景色會立即變為紅色，當我們松開鼠標時，它的背景色會恢復為原來的顏色。

通過使用:hover和:active偽元素，我們可以方便地創建鼠標點擊后改變顏色的效果。無論是hover還是active偽元素，都能夠讓我們的網頁更加豐富多彩，為用戶帶來更好的使用體驗。