鼠標點擊是網頁設計中常用的交互方式之一，通過點擊不同的元素來實現頁面跳轉、打開下拉菜單和展示隱藏的內容等。但是，有時候我們還需要通過鼠標點擊來添加 CSS 樣式，比如實現單選按鈕被選中時的樣式、點擊按鈕實現頁面主題切換等。下面我們就來介紹一種實現通過鼠標點擊 CSS 添加樣式的方法。

.switch {
width: 80px;
height: 40px;
background-color: #ccc;
border-radius: 20px;
position: relative;
margin: 20px auto;
cursor: pointer;
}
.switch::after {
content: '';
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
transition: left 0.3s ease-in-out;
}
.switch.on {
background-color: #339cff;
}
.switch.on::after {
left: 40px;
}
.switch.off::after {
left: 0;
}

以上是一段添加樣式的 CSS 代碼。我們可以使用鼠標點擊的方式來控制按鈕的狀態，通過添加 .on 或 .off 類來改變按鈕的樣式。同時，按鈕中的滑塊也會根據按鈕的狀態在兩個位置之間切換，實現更好的交互體驗。

在 HTML 中，我們需要定義按鈕的結構，并設置一個默認的 .off 類，用于默認顯示按鈕的初始狀態。通過添加 JavaScript 代碼，我們就可以在鼠標點擊事件發生時為按鈕添加 .on 類，從而實現樣式的更改。

<div class="switch off"></div>
<script>
var switchBtn = document.querySelector('.switch');
switchBtn.addEventListener('click', function() {
if (switchBtn.classList.contains('off')) {
switchBtn.classList.remove('off');
switchBtn.classList.add('on');
} else {
switchBtn.classList.remove('on');
switchBtn.classList.add('off');
}
});
</script>

通過以上代碼的實現，我們就可以用鼠標點擊的方式來實現 CSS 樣式的更改。這種方式不僅簡單、易實現，還可以為網頁帶來更多的交互效果，提高用戶體驗。