組件切換是現代網站中常見的交互方式。通常情況下，我們會使用JavaScript來處理這些交互效果。但是，如果我們想要只使用純CSS，也是完全可行的。

以下是一個示例：我們可以創建兩個div，一個用于展示內容，另一個用于觸發切換。在這個示例中，我們將使用checkbox的狀態來控制展示/隱藏狀態。

<div class="content">
<p>這里是默認展示的內容</p>
<p>還有更多驚喜！</p>
</div>
<label for="toggle">點擊這里切換內容</label>
<input type="checkbox" id="toggle">

接下來，我們使用CSS來定義在checkbox的不同狀態下，content的顯示/隱藏方式。

.content {
display: none;
}
input[type=checkbox]#toggle:checked ~ .content {
display: block;
}
input[type=checkbox]#toggle:not(:checked) ~ .content {
display: none;
}

這段代碼的含義：首先，我們將content元素的display屬性設置為none，這樣它就會被隱藏。然后，我們使用“~”操作符來將input和content連接起來。當checkbox被選中時，我們使用:checked偽類將content的display屬性設置為block，從而顯示出來。相反地，如果checkbox未選中，則我們使用:not(:checked)偽類將display屬性設置為none，使content隱藏。

當然，這只是一個簡單的例子。在實際應用中，我們需要根據需求調整樣式和交互效果。但是，使用CSS實現組件切換是一種簡單而有效的方式。