美文网首页
css的伪类选择器

css的伪类选择器

作者: 放不下FBX | 来源:发表于2018-10-24 20:42 被阅读0次

    伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

    比如div是属于box类,这一点很明确,就是属于box类。但是a属于什么类?不明确。因为需要看用户点击前是什么状态,点击后是什么状态。所以,就叫做“伪类”。

    静态伪类和动态伪类
    伪类选择器分为两种。

    (1)静态伪类:只能用于超链接的样式。如下:

    :link 超链接点击之前
    :visited 链接被访问过之后
    PS:以上两种样式,只能用于超链接。

    (2)动态伪类:针对所有标签都适用的样式。如下:

    :hover “悬停”:鼠标放到标签上的时候
    :active “激活”: 鼠标点击标签,但是不松手时。
    :focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)
    PS:以上三种样式,只能用于超链接。

    超链接a标签
    超链接的四种状态
    a标签有4种伪类(即对应四种状态),要求背诵。如下:

    :link “链接”:超链接点击之前
    :visited “访问过的”:链接被访问过之后
    :hover “悬停”:鼠标放到标签上的时候
    :active “激活”: 鼠标点击标签,但是不松手时。
    对应的代码如下:(不带注释)
    a:link{
    color:red;
    }
    a:visited{
    color:orange;
    }
    a:hover{
    color:green;
    }
    a:active{
    color:black;
    }
    对应的代码如下:(带注释)
    /让超链接点击之前是红色/
    a:link{
    color:red;
    }

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

    相关文章

      网友评论

          本文标题:css的伪类选择器

          本文链接:https://www.haomeiwen.com/subject/hhxftqtx.html