本篇文章和大家了解一下css實(shí)現(xiàn)點(diǎn)擊改變顏色的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、紅寺堡網(wǎng)站維護(hù)、網(wǎng)站推廣。

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對(duì)于網(wǎng)頁進(jìn)行格式化。

css實(shí)現(xiàn)點(diǎn)擊改變顏色的步驟：1、使用“:active”偽類，配合“:focus”偽類，只需要將“:active”偽類和“:focus”偽類設(shè)置相同背景顏色即可實(shí)現(xiàn)效果；2、使用tabindex屬性控制次序，配合“:focus”偽類實(shí)現(xiàn)點(diǎn)擊后變色，且不消失效果。

可通過使用css偽類實(shí)現(xiàn)點(diǎn)擊元素變色的效果，兩個(gè)偽類是:active, :focus

1、:active：用于選擇活動(dòng)鏈接。當(dāng)在一個(gè)鏈接上點(diǎn)擊時(shí)，它就會(huì)成為活動(dòng)的（激活的），:active選擇器適用于所有元素，不僅限于鏈接a元素

:focus：用于選取獲得焦點(diǎn)的元素。僅接收鍵盤事件或其他用戶輸入的元素允許 :focus 選擇器。

由于上面的特性，如果想實(shí)現(xiàn)點(diǎn)擊時(shí)變色效果，有以下兩種方法，兩者區(qū)別在

:active，元素被點(diǎn)擊時(shí)變色，但顏色在點(diǎn)擊后消失

:focus， 元素被點(diǎn)擊后變色，且顏色在點(diǎn)擊后不消失

 
 
 
 
 

 

    cmcc
        
 

效果：

2、由于div等元素?zé)o法接受鍵盤或其他用戶事件，即不支持:focus偽類，可通過增加tabIndex屬性使其支持:focus

 
 
 
 
 
 

    
        Section 1