最近寫一些前端網(wǎng)頁(yè)時(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;
    }