網頁美化離不開 CSS，而 CSS 中可以使用偽類來表示元素的狀態，其中 :hover 偽類表示當鼠標懸浮在一個元素上時，它的狀態。除此之外，還有 :active 、:focus 和選中狀態。

選中狀態通常用來表示用戶點擊了一個元素并選中了它。在 CSS 中，選中狀態使用 :checked 偽類實現。:checked 只適用于某些特定的元素，如 input[type="radio"] 和 input[type="checkbox"]。

input[type="radio"]:checked{
/* 選中狀態的樣式 */
}
input[type="checkbox"]:checked{
/* 選中狀態的樣式 */
}

上面的代碼中，當用戶選中了一個 radio 或 checkbox，它們的狀態就會變成 :checked。我們可以使用 :checked 偽類來為它們的選中狀態添加樣式。

值得注意的是， :checked 偽類只適用于選中狀態，而不是取消選中狀態。如果用戶取消了選中狀態，那么 :checked 偽類就不再生效。要實現取消選中狀態時的樣式，可以使用 :not(:checked) 偽類。

input[type="radio"]:not(:checked) + label{
/* 未選中狀態的樣式 */
}
input[type="checkbox"]:not(:checked) + label{
/* 未選中狀態的樣式 */
}

上面的代碼中，當用戶取消選中一個 radio 或 checkbox，它們的狀態就會變成 :not(:checked)，我們可以使用 :not(:checked) 偽類來為它們的取消選中狀態添加樣式。這里需要用到相鄰兄弟選擇器 (+)，它表示選中的元素的下一個兄弟元素。

總之，使用 :checked 和 :not(:checked) 偽類可以讓我們更好地控制 radio 和 checkbox 的選中狀態和取消選中狀態的樣式。在實踐中，我們也可以使用這些偽類實現一些不同尋常的效果。