5 CSS伪类选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了5 CSS伪类选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

5 伪类选择器

anchor伪类：专用于控制链接的显示效果

More Actions:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	选择鼠标指针位于其上的链接。

<style>
           a:link{
               color: red;
           }
           a:visited{
               color: coral;
           }
           a:hover{
               color: blue;
           }
           a:active{
               color: rebeccapurple;
           }

    </style>

before after伪类
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。

More Actions:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:before	p:before	在每个元素的内容之前插入内容。
:after	p:after	在每个元素的内容之后插入内容。文章来源地址https://www.toymoban.com/news/detail-661864.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css伪类选择器</title>

    <style>
        /*a:link{*/
        /*    color: red;     !* 鼠标点击字体变成红色 *!*/
        /*}*/
        /*a:visited{*/
        /*    color: coral;   !* 设定字体为橙色 *!*/
        /*}*/
        /*a:hover{*/
        /*    color: blue;    !* 鼠标滑过字体变成蓝色 *!*/
        /*}*/
        /*a:active{*/
        /*    color: rebeccapurple;*/
        /*}*/

        .c1 p:first-child{
            color: red;
        }

        p#i1:after{
            content: "这是一个伪类构造的块级标签";
            display: block;
            color: gold;
        }
    </style>

</head>
<body>
<a href="https://www.baidu.com">hello world! </a>

<div class="c1">
    <p>item1</p>
    <p>item2</p>
    <div>item3</div>
    <p>item4</p>
</div>

<div id="i1">
    DIV标签
    <!--    <div style="color: red">这是一个伪类构造的块级标签</div>-->
</div>

<p>两只黄鹂鸣翠柳</p>

</body>
</html>

到了这里，关于5 CSS伪类选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！