首页 > 其他分享> > 第十九课--伪类(Pseudo-classes)

第十九课--伪类(Pseudo-classes)

2019-08-12 15:41:31 作者：互联网

a.
伪类是用来添加一些选择器的特殊效果

b.anchor伪类--链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

c.伪类和CSS类
a.red:visited {color:#FF0000;}
:first-child 伪类--可以使用 :first-child 伪类来选择父元素的第一个子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类(Pseudo-classes)</title>
</head>
<style>
    /*!* 未访问的链接 *! */
    /*a:link {*/
    /*    color: #FF0000;*/
    /*}*/

    /*!* 已访问的链接 *!*/
    /*a:visited {*/
    /*    color: #00FF00;*/
    /*}*/


    /*!* 鼠标划过链接 *!*/
    /*a:hover {*/
    /*    color: #FF00FF;*/
    /*}*/


    /* !* 已选中的链接 *!*/
    /*a:active {*/
    /*    color: #0000FF;*/
    /*}*/
    a.red:visited {
        color: #FF0000;
    }

    a:first-child {
        color: yellow;
    }
</style>
<body>
<a href="#">hello</a>
<a href="javascript:void(0);">hello</a>
<a href="javascript:void(0);">hello</a>
<a href="javascript:void(0);">hello</a>
<a class="red" href="css-syntax.html">CSS 语法</a>

</body>
</html>

标签：伪类,color,Pseudo,hello,FF0000,classes,visited,链接
来源： https://blog.csdn.net/weixin_36691991/article/details/99303633