CSS自带的伪类选择器

2018-10-23  本文已影响0人  一粒有梦想的痞老板

我们使用CSS自带的伪类选择器,从而可以更加方便的完成页面点击事件

css伪类选择器:分为静态和静态

静态伪类 只能用于超链接的样式

动态伪类 针对所有标签都适用的样式

实例

/*让超链接点击之前是红色*/
        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;
    }
上一篇 下一篇

猜你喜欢

热点阅读