本文目錄導(dǎo)讀：

1. 使用JavaScript和CSS類

CSS中改變?cè)剡x中后的顏色設(shè)置

在CSS樣式設(shè)計(jì)中，改變?cè)卦谟脩酎c(diǎn)擊或選中后的顏色是一種常見的需求，這可以通過使用偽類來實(shí)現(xiàn)，如:active，:focus等，下面我們將詳細(xì)介紹如何在CSS中設(shè)置元素在選中后的顏色。

一、使用:active偽類

:active偽類用于描述元素被用戶激活的狀態(tài)，比如按鈕被點(diǎn)擊時(shí)，我們可以使用這個(gè)偽類來改變?cè)卦谶x中后的顏色。

a:active {
  color: red; /* 設(shè)置選中的鏈接文字顏色為紅色 */
}

二、使用:focus偽類

:focus偽類用于描述元素獲得焦點(diǎn)時(shí)的狀態(tài)，比如輸入框被點(diǎn)擊時(shí)，雖然它主要用于表單元素，但也可以用于其他可交互元素來改變選中后的顏色。

a:focus {
  color: blue; /* 設(shè)置獲得焦點(diǎn)的鏈接文字顏色為藍(lán)色 */
}

使用JavaScript和CSS類

除了使用偽類，我們還可以結(jié)合JavaScript和CSS類來改變?cè)卦谔囟ㄊ录ㄈ琰c(diǎn)擊）后的顏色，我們可以創(chuàng)建一個(gè)CSS類來設(shè)置顏色，然后使用JavaScript在元素被點(diǎn)擊時(shí)添加這個(gè)類。

.selected {
  color: green; /* 設(shè)置選中的鏈接文字顏色為綠色 */
}

然后在JavaScript中：

document.querySelector('a').addEventListener('click', function() {
  this.classList.add('selected'); // 添加選中的CSS類
});

就是使用CSS來改變?cè)卦谶x中后的顏色的幾種方法，在實(shí)際應(yīng)用中，可以根據(jù)具體需求和場(chǎng)景選擇合適的方法。