無論是在前端開發還是UI設計中，設置選中狀態都是一個很常見的需求。使用CSS可以輕松設置元素的選中狀態，下面我們來詳細了解一下。

/* 設置未選中狀態 */
p {
font-size: 16px;
color: #333;
background-color: #fff;
}
/* 設置選中狀態 */
p:active {
font-size: 18px;
color: #fff;
background-color: #369;
}

如上所示，首先我們通過設置

元素的一般樣式，包括字體大小、顏色和背景色等。緊接著，我們使用偽類:active來設置選中狀態的樣式。在該示例中，選中狀態下字體變大，顏色變白，背景色變為深藍色。

需要注意的是，:active偽類只在元素被激活時才能生效。在不同的瀏覽器中，元素被激活的時間可能會有所不同。例如，點擊一個鏈接或按鈕時，:active偽類會立即生效；而在其他情況下，諸如拖拽或按下按鍵時則需要元素保持選中狀態才能生效。

除了:active偽類之外，還有其他可以設置選中狀態的偽類，例如：:hover、:focus等，它們都可以設置元素在不同狀態下的樣式。

/* 設置hover狀態 */
p:hover {
color: #f90;
}
/* 設置focus狀態 */
input:focus {
border-color: #36f;
box-shadow: 0 0 2px 2px #36f;
}

以上代碼分別設置了鼠標懸停狀態和輸入框得到焦點狀態下的樣式，它們的使用方式與:active偽類類似。

總的來說，使用CSS設置選中狀態非常簡單，只需要掌握偽類的使用方法即可。在實際開發中，我們可以靈活運用這些技巧來滿足不同的設計需求。