css的偽類選擇器

偽類:同一個(gè)標(biāo)簽,根據(jù)其不同的種狀態(tài),有不同的樣式。這就叫做“偽類”。偽類用冒號(hào)來(lái)表示。

比如div是屬于box類,這一點(diǎn)很明確,就是屬于box類。但是a屬于什么類?不明確。因?yàn)樾枰从脩酎c(diǎn)擊前是什么狀態(tài),點(diǎn)擊后是什么狀態(tài)。所以,就叫做“偽類”。

靜態(tài)偽類和動(dòng)態(tài)偽類
偽類選擇器分為兩種。

(1)靜態(tài)偽類:只能用于超鏈接的樣式。如下:

:link 超鏈接點(diǎn)擊之前
:visited 鏈接被訪問(wèn)過(guò)之后
PS:以上兩種樣式,只能用于超鏈接。

(2)動(dòng)態(tài)偽類:針對(duì)所有標(biāo)簽都適用的樣式。如下:

:hover “懸?!保菏髽?biāo)放到標(biāo)簽上的時(shí)候
:active “激活”: 鼠標(biāo)點(diǎn)擊標(biāo)簽,但是不松手時(shí)。
:focus 是某個(gè)標(biāo)簽獲得焦點(diǎn)時(shí)的樣式(比如某個(gè)輸入框獲得焦點(diǎn))
PS:以上三種樣式,只能用于超鏈接。

超鏈接a標(biāo)簽
超鏈接的四種狀態(tài)
a標(biāo)簽有4種偽類(即對(duì)應(yīng)四種狀態(tài)),要求背誦。如下:

:link “鏈接”:超鏈接點(diǎn)擊之前
:visited “訪問(wèn)過(guò)的”:鏈接被訪問(wèn)過(guò)之后
:hover “懸?!保菏髽?biāo)放到標(biāo)簽上的時(shí)候
:active “激活”: 鼠標(biāo)點(diǎn)擊標(biāo)簽,但是不松手時(shí)。
對(duì)應(yīng)的代碼如下:(不帶注釋)
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
對(duì)應(yīng)的代碼如下:(帶注釋)
/讓超鏈接點(diǎn)擊之前是紅色/
a:link{
color:red;
}

/讓超鏈接點(diǎn)擊之后是綠色/
a:visited{
color:orange;
}
/鼠標(biāo)懸停,放到標(biāo)簽上的時(shí)候/
a:hover{
color:green;
}
/鼠標(biāo)點(diǎn)擊鏈接,但是不松手的時(shí)候/
a:active{
color:black;

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 最近寫(xiě)一些前端網(wǎng)頁(yè)時(shí),不想用jQuery,js等就想實(shí)現(xiàn)一些鼠標(biāo)事件觸發(fā)不同的樣式。因此我們可以使用CSS自帶的偽...
    默寫(xiě)_0c03閱讀 517評(píng)論 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,868評(píng)論 1 45
  • :hover{}為什么要在下面? a連接常用的偽類選擇器有四種,根據(jù)CSS文檔的推薦,這四個(gè)選擇器最好按如下方式排...
    朱小維閱讀 1,270評(píng)論 0 0
  • 1. class 和 id 的使用場(chǎng)景: id:id選擇器,使用#name定義(name為id名,可任意取名),使...
    石林濤閱讀 440評(píng)論 0 1
  • 本文轉(zhuǎn)載自:眾成翻譯譯者:為之漫筆鏈接:http://www.zcfy.cc/article/239原文:http...
    極樂(lè)君閱讀 7,555評(píng)論 1 62

友情鏈接更多精彩內(nèi)容