CSS是前端開發中必不可少的一種技術。其中，通過CSS實現點擊分類是一項常見且實用的功能。今天我們就來介紹一下具體的實現方法。

.nav {
display: flex;
justify-content: space-evenly;
padding: 20px 0;
}
.active {
color: red;
font-weight: bold;
}
.nav-item:hover {
cursor: pointer;
}
.content {
display: none;
}
.show {
display: block;
}

首先是HTML部分。需要先定義好分類和內容的框架，如下：

<div class="nav">
<div class="nav-item active">分類1</div>
<div class="nav-item">分類2</div>
<div class="nav-item">分類3</div>
</div>
<div class="content show">分類1的內容</div>
<div class="content">分類2的內容</div>
<div class="content">分類3的內容</div>

其中，分類和內容的div需要添加相應的class，方便后續的CSS控制。

接著是CSS部分。需要定義好.nav、.nav-item、.active、.content和.show這些class的樣式和作用。

.nav控制整個分類菜單的樣式，這里使用了flex布局，并添加了20px的上下邊距。.nav-item控制單個分類的樣式，包括默認狀態和懸停狀態。active則用于標記當前選中的分類。content用于控制所有分類內容的初始狀態，而show則表示選中后應該呈現出來的狀態。

最后是JS部分。需要對每個.nav-item添加點擊事件，當點擊時切換.active標記和.content的顯示狀態。具體代碼如下：

var navItems = document.querySelectorAll('.nav-item');
var contents = document.querySelectorAll('.content');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function(event) {
for (var j = 0; j < navItems.length; j++) {
navItems[j].classList.remove('active');
contents[j].classList.remove('show');
}
event.target.classList.add('active');
var index = Array.prototype.indexOf.call(navItems, event.target);
contents[index].classList.add('show');
});
}

以上就是使用CSS實現點擊分類的全部代碼和解釋。希望對您有所幫助，謝謝。