css的伪类选择器

最近写一些前端网页时，不想用jQuery，js等就想实现一些鼠标事件触发不同的样式。因此我们可以使用CSS自带的伪类选择器来帮我们达到目的
css伪类选择器：

• 静态伪类 只能用于超链接的样式
  • :link 用于未被访问的链接
  • :visited 用于已访问的链接
• 动态伪类 针对所有标签都适用的样式
  • :hover 用于当用户把鼠标移动到元素上面时的效果；
  • :active 用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
  • :focus 用于元素成为焦点，经常用在表单上

注意在使用伪类选择器时，要让他们遵循一个爱恨原则：LoVe,HAte,也就是Link--visited--hover--active不然会有意想不到的错误。

对应代码：

       /*让超链接点击之前是红色*/
        a:link{
            color:red;
        }

        /*让超链接点击之后是绿色*/
        a:visited{
            color:orange;
        }
        /*鼠标悬停，放到标签上的时候*/
        a:hover{
            color:green;
        }
        /*鼠标点击链接，但是不松手的时候*/
        a:active{
            color:black;

文本框例子：

  /*
    伪类选择器：动态伪类
  */

   /*
    让文本框获取焦点时：
    边框：#FF6F3D这种橙色
    文字：绿色
    背景色：#6a6a6a这种灰色
   */
    input:focus{
        border:3px solid #FF6F3D;
        color:white;
        background-color:#6a6a6a;
    }

    /*
    鼠标放在标签上时显示蓝色
    */
    label:hover{
        color:blue;
    }

    /*
    点击标签鼠标没有松开时显示红色
    */
    label:active{
        color:red;
    }