CSS——伪类选择器

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

:linka: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>

　　

2、before after伪类

:first-childp:first-child选择属于父元素的第一个子元素的每个 元素。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 元素。
:before p:before 在每个 元素的内容之前插入内容。
:after p:after 在每个 元素的内容之后插入内容。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

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

        .c1 div:last-child{
            color: red;
        }

        p#i1:after{
            content:"hello";
            color:red;
            display: block;
        }

    </style>


</head>
<body>

<div class="c1">
    <p>item1</p>
    <p>item1</p>
    <div>item1</div>
    <p>item1</p>
</div>

<p id="i1">p标签</p>

</body>
</html>

　　

posted @ 2021-09-30 13:40  映辉  阅读(322)  评论(0)    收藏  举报