<前言>　　在頁面樣式設計中，CSS是必不可少的一部分。CSS不僅可以美化頁面，還可以改變頁面的交互和狀態。我們通常會將CSS分為四種狀態：普通狀態、懸浮狀態、點擊狀態和選中狀態。這篇文章將帶您深入了解這四種狀態及其運用。<普通狀態>　　當鼠標沒有懸停在元素上，元素處于“普通狀態”。在CSS中，我們可以使用一般的樣式規則來描述元素的普通狀態，如下所示：

p {
color: black;
font-size: 16px;
text-decoration: none;
}

　　這里的color、font-size和text-decoration屬性都是針對p元素的普通狀態。在普通狀態下，文字顏色為黑色，字號為16像素，無下劃線。<懸浮狀態>　　當鼠標懸停在元素上時，元素會發生“懸浮狀態”。在CSS中，我們可以通過:hover偽類選擇器來描述元素懸浮狀態下的樣式，如下所示：

p:hover {
color: red;
text-decoration: underline;
}

　　這里的color和text-decoration屬性都是針對p元素的懸浮狀態。在懸浮狀態下，文字顏色變為紅色，有下劃線。<點擊狀態>　　當鼠標在元素上點擊時，元素會發生“點擊狀態”。在CSS中，我們可以通過:active偽類選擇器來描述元素點擊狀態下的樣式，如下所示：

button:active {
background-color: gray;
box-shadow: none;
}

　　這里的background-color和box-shadow屬性都是針對button元素的點擊狀態。在點擊狀態下，按鈕背景色變為灰色，不再有陰影效果。<選中狀態>　　當用戶選擇元素時，元素會發生“選中狀態”。在CSS中，我們可以通過:checked偽類選擇器來描述元素選中狀態下的樣式，如下所示：

input[type="radio"]:checked + span {
background-color: pink;
color: white;
}

　　這里的background-color和color屬性都是針對radio按鈕的選中狀態。在選中狀態下，按鈕所在的span元素背景色變為粉色，文字顏色變為白色。<結語>　　以上就是CSS四種狀態的介紹。了解這些狀態的變化可以讓我們更好地控制頁面交互和樣式效果。希望這篇文章對您有所幫助。