CSS 切換選中狀態可以實現很多有趣的效果，比如用于按鈕、導航欄等元素中。下面我們來學習一下如何使用 CSS 切換選中狀態。

首先，我們需要為元素定義一個默認狀態的樣式，并為其添加一個類名：

.my-btn {
background-color: #eee;
color: #555;
border: none;
padding: 10px 20px;
border-radius: 5px;
}

接下來，我們需要為選中狀態再添加一個樣式，并定義一個偽類（:active）來表示元素被按下的狀態：

.my-btn:active {
background-color: #ccc;
color: #fff;
}

這樣，我們就可以實現按鈕被按下時的選中狀態了。當然，你也可以通過其他偽類來實現選中狀態，比如 :hover（當鼠標懸停在元素上時的狀態）或 :focus（當元素獲得焦點時的狀態）。

除了按鈕，導航欄也經常使用選中狀態來標記當前所在頁面。我們可以使用 :active、:hover 或 :focus 來實現這個效果：

.nav-item:active,
.nav-item:hover,
.nav-item:focus {
background-color: #ccc;
color: #fff;
}

注意，在使用 :active 偽類時，元素必須是可點擊的（比如按鈕）。如果你想讓其他元素（比如 div）也能夠使用 :active 偽類，需要在 CSS 中將其設為可點擊（比如添加 cursor: pointer; 屬性）。