CSS的選擇器很多，其中定義選擇按鈕也是一項非常實用的功能。在實際應(yīng)用中，選擇按鈕可以用于網(wǎng)頁中的復(fù)選框、單選框和開關(guān)等元素的樣式設(shè)置。

input[type="checkbox"] {
/* 定義復(fù)選框選擇器 */
width: 20px; /* 寬度 */
height: 20px; /* 高度 */
margin-right: 10px; /* 右側(cè)邊距 */
border-radius: 3px; /* 圓角 */
border: 1px solid #ccc; /* 邊框 */
}
input[type="checkbox"]:checked {
/* 定義復(fù)選框被選中時的選擇器 */
background-color: #666; /* 背景色 */
border-color: #666; /* 邊框顏色 */
}
input[type="radio"] {
/* 定義單選框選擇器 */
width: 20px; /* 寬度 */
height: 20px; /* 高度 */
margin-right: 10px; /* 右側(cè)邊距 */
border-radius: 50%; /* 圓角 */
border: 1px solid #ccc; /* 邊框 */
}
input[type="radio"]:checked {
/* 定義單選框被選中時的選擇器 */
background-color: #666; /* 背景色 */
border-color: #666; /* 邊框顏色 */
}
.switch {
/* 定義開關(guān)選擇器 */
position: relative; /* 使得內(nèi)部元素相對定位 */
width: 40px; /* 寬度 */
height: 20px; /* 高度 */
border-radius: 30px; /* 圓角 */
border: 1px solid #ccc; /* 邊框 */
}
.switch .slider {
/* 定義開關(guān)滑塊的選擇器 */
position: absolute; /* 相對定位 */
top: 1px; /* 頂部上移一點 */
left: 1px; /* 左側(cè)緊貼父元素 */
width: 18px; /* 寬度 */
height: 18px; /* 高度 */
border-radius: 50%; /* 圓角 */
background-color: #ccc; /* 灰色 */
transition: transform .3s ease; /* 動畫過渡效果 */
}
.switch input[type="checkbox"]:checked + .slider {
/* 定義開關(guān)被選中時滑塊的選擇器 */
transform: translateX(20px); /* 橫向平移一段距離 */
background-color: #66cc66; /* 綠色 */
}

上述代碼演示了使用CSS的選擇器定義復(fù)選框、單選框和開關(guān)的樣式效果。通過使用偽類選擇器，可以實現(xiàn)元素被選中時的樣式設(shè)置，如復(fù)選框和單選框選中時的背景色和邊框顏色，以及開關(guān)滑塊平移和背景色的變化。