在CSS的第八章中，我們學(xué)習(xí)了如何使用屬性選擇器來選擇指定屬性值的元素。課后練習(xí)3則要求我們實(shí)現(xiàn)一個(gè)類名為“selected”的元素在被點(diǎn)擊后，背景色變?yōu)辄S色。

.selected {
background-color: white;
cursor: pointer;
}
/* 使用屬性選擇器選中具有selected屬性的元素 */
[selected] {
background-color: yellow;
}
/* 使用JavaScript為元素添加選中效果 */
document.querySelector('.selected').addEventListener('click', function() {
this.setAttribute('selected', '');
});

以上代碼實(shí)現(xiàn)了當(dāng)具有“selected”類名的元素被點(diǎn)擊時(shí)，其背景色變?yōu)辄S色。

首先，我們?yōu)榫哂小皊elected”類名的元素定義了初始的樣式，包括背景色為白色和鼠標(biāo)指針樣式為手型。接下來，我們使用屬性選擇器選中具有“selected”屬性的元素，并將其背景色設(shè)為黃色。最后，我們使用JavaScript實(shí)現(xiàn)了具有“selected”類名的元素被點(diǎn)擊后，為其添加“selected”屬性以達(dá)到背景色變色的效果。

通過該練習(xí)，我們了解了如何使用CSS的屬性選擇器以及JavaScript為元素添加屬性，實(shí)現(xiàn)在特定條件下元素樣式的改變。