最近寫一些前端網(wǎng)頁時(shí)而叼，不想用jQuery已烤，js等就想實(shí)現(xiàn)一些鼠標(biāo)事件觸發(fā)不同的樣式爱咬。因此我們可以使用CSS自帶的偽類選擇器來幫我們達(dá)到目的
css偽類選擇器：
-
靜態(tài)偽類 只能用于超鏈接的樣式
- :link 用于未被訪問的鏈接
- :visited 用于已訪問的鏈接
-
動(dòng)態(tài)偽類 針對(duì)所有標(biāo)簽都適用的樣式
- :hover 用于當(dāng)用戶把鼠標(biāo)移動(dòng)到元素上面時(shí)的效果驰唬；
- :active 用于用戶點(diǎn)擊元素那一下的效果（正發(fā)生在點(diǎn)的那一下际邻，松開鼠標(biāo)左鍵此動(dòng)作也就完成了）
- :focus 用于元素成為焦點(diǎn)芯丧，經(jīng)常用在表單上
注意在使用偽類選擇器時(shí)，要讓他們遵循一個(gè)愛恨原則：LoVe,HAte,也就是Link--visited--hover--active不然會(huì)有意想不到的錯(cuò)誤世曾。
對(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;
文本框例子：
/*
偽類選擇器：動(dòng)態(tài)偽類
*/
/*
讓文本框獲取焦點(diǎn)時(shí)：
邊框：#FF6F3D這種橙色
文字：綠色
背景色：#6a6a6a這種灰色
*/
input:focus{
border:3px solid #FF6F3D;
color:white;
background-color:#6a6a6a;
}
/*
鼠標(biāo)放在標(biāo)簽上時(shí)顯示藍(lán)色
*/
label:hover{
color:blue;
}
/*
點(diǎn)擊標(biāo)簽鼠標(biāo)沒有松開時(shí)顯示紅色
*/
label:active{
color:red;
}
