如何在CSS 中設定選定單選按鈕標籤的樣式
單選按鈕在Web 介面中提供了獨特的交互元素，允許使用者選擇一個來自一組的選項。為了增強其視覺吸引力，通常需要對與所選單選按鈕關聯的標籤進行樣式設定。
問題：
您正在嘗試使用 CSS 將樣式套用到選取單選按鈕的標籤。您目前的程式碼片段包括以下內容：
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}識別問題：
此CSS 選擇器不起作用，因為相鄰同級選擇器“ ”僅匹配它後面的元素的第一個實例。但是，在 HTML 程式碼中，標籤並不緊鄰輸入元素。
解決方案：
要設定所選單選按鈕的標籤樣式， CSS 選擇器必須專門針對與已檢查輸入關聯的標籤元素。這可以使用標籤中的「for」屬性和對應輸入元素中的「id」屬性來實現，如以下程式碼所示：
<div class="radio-toolbar"> <input type="radio">
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}透過調整CSS 選擇器，程式碼現在可以正確定位所選單選按鈕的標籤並套用所需的樣式。
以上是如何在 CSS 中設定選定單選按鈕標籤的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
