CSS中有一個(gè)input選擇器，用于指定不同類型的表單元素樣式。而在其中，也可利用:checked偽類選擇器來設(shè)置性別選擇的樣式。

input[type="radio"]:checked + label {
/* 選中的性別的樣式 */
}
input[type="radio"] + label {
/* 未選中的性別的樣式 */
}

這里的代碼使用了CSS選擇器中的“相鄰兄弟選擇器”。意思是說，選中的radio按鈕與其相鄰的label標(biāo)簽有著相同的父元素，并且是后續(xù)緊挨著的元素。

在這個(gè)選擇器中，我們利用:checked偽類選擇器，來設(shè)置選中的性別的樣式。在未選中的情況下，label標(biāo)簽則使用默認(rèn)樣式。這里的例子是針對(duì)radio按鈕來設(shè)置的，如果是checkbox的話，代碼類似，只是指定的表單元素類型不同罷了。

更進(jìn)一步地，可通過為label標(biāo)簽設(shè)置不同的for屬性，關(guān)聯(lián)到對(duì)應(yīng)的radio或checkbox元素，從而實(shí)現(xiàn)樣式設(shè)置。其中，for屬性的值應(yīng)該與對(duì)應(yīng)表單元素的id屬性相同。另外，不要忘了定義input元素的name屬性，用于指定其所屬的表單。

/* 關(guān)聯(lián)radio元素與label標(biāo)簽 */
<input type="radio" id="male" name="gender" />
<label for="male">男性</label>
<input type="radio" id="female" name="gender" />
<label for="female">女性</label>
/* 關(guān)聯(lián)checkbox元素與label標(biāo)簽 */
<input type="checkbox" id="read" name="hobby" />
<label for="read">閱讀</label>
<input type="checkbox" id="music" name="hobby" />
<label for="music">聽音樂</label>

當(dāng)然，這里所設(shè)置的性別選擇的樣式只是一個(gè)例子，實(shí)際情況中，你可以根據(jù)項(xiàng)目需求自由發(fā)揮，設(shè)置出更加符合你理念的樣式。