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;
}

链接:https://www.jianshu.com/p/407a3fe0ebe6

你可能感兴趣的:(Css伪类选择器)