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 在每个

元素的内容之后插入内容。

 
<!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>
posted @ 2023-08-21 14:09  生而自由爱而无畏  阅读(49)  评论(0)  编辑  收藏  举报