CSS是前端開發中不可缺少的技術，它可以為網頁添加各種動態效果和樣式。在日常開發中，經常需要實現點擊變紅的效果。下面我們來介紹一下如何通過CSS實現這種效果。

/* 定義初始樣式 */
.clickable {
color: black;
background-color: white;
}
/* 定義被點擊后的樣式 */
.clickable.active {
color: white;
background-color: red;
}
/* 使用JavaScript為DOM元素添加點擊事件 */
const clickable = document.querySelector('.clickable');
clickable.addEventListener('click', function() {
this.classList.toggle('active');
});

上面的代碼首先定義了類名為“clickable”的初始樣式和被點擊后的樣式。其中初始狀態下字體顏色為黑色，背景顏色為白色。被點擊后，字體顏色變為白色，背景顏色變為紅色。

接著我們使用JavaScript為DOM元素添加點擊事件，當用戶點擊時，切換類名為“clickable”的元素的類名，使其從初始狀態切換到被點擊后的狀態（或者從被點擊后的狀態切換到初始狀態）。

這樣，當用戶點擊帶有“clickable”類名的元素時，就可以實現點擊變紅的效果了。