css伪类选择器，css伪元素

憨憨404

已于 2023-12-12 18:20:54 修改

阅读量184

点赞数

分类专栏： HTML + CSS + CSS3（页面布局）文章标签： css 前端 html

于 2022-11-14 20:12:48 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/127854274

版权

HTML + CSS + CSS3（页面布局）专栏收录该内容

22 篇文章 0 订阅

订阅专栏

伪类选择器：

1、书写顺序link visited hover active：错误的顺序可能会使超链接失效

记忆方法：love(喜欢）hate(讨厌)

2、hover和active是对任何元素都有效，任何元素都可以有这个伪类选择器。但是link和visited这是只是针对超链接（即a标签）有效。

    <style>

/* 伪类选择器：注意书写顺序 */

        /* 超链接未点击状态 ：
            如果link状态不生效是因为浏览器缓存的问题，你之前在浏览器中访问过这个网站，
            他就会认为你已经访问过了。
            解决方案
               1：清除浏览器缓存。解决方案
               2：重新写一个没有访问过的链接地址观察效果。
        */
        a:link{
            color: red;
        }
        /* 超链接已点击过状态 */
        a:visited{
            color: green;
        }
        /* 鼠标悬停状态 */
        a:hover{
            color: yellow;
        }
        /* 鼠标点击时，长按 */
        a:active{
            color: aqua;
        }
        /* 一般标签用后hover和active */
        div:hover{
            color: aqua;
        }
        div:active{
            color: red;
        }
    </style>

<body>
    <a href="http://www.baidu.com">我是百度</a>
    <diV>
        我是div,hello
    </diV>
</body>

css伪元素：

常用 ::after、::before，必须和content：""; 结合使用，可以设置content内容为空值

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

    <style>
        div{
            width: 200px ;
            height: 200px;
            background-color: aquamarine;
        }
        
        .box1::after{
            content: "我是after";
            background-color: aqua;
            display: inline-block;
            width: 50px;
            height: 50px;
        }
        .box2::before{
            content: "我就是before：";
            background-color: blueviolet;
            display: block;
            width: 50px;
            height: 50px;
        }

        /*  了解使用，不常用 */
        .box3::first-letter{
            font-size: 50px;
            color: brown;
            background-color: pink;
        }
        .box4::first-line{
            font-size: 50px;
            color: brown;
            background-color: pink;
        }
        
    </style>

<body>
    <div class="box1">
        我后边就是after伪元素内容啊：
    </div>
    <br>
    <div class="box2">
        我的前面是before伪元素内容
    </div>
    <br><br><br><br>
    <div class="box3">
        首字母就是first-letter伪元素内容啊：
    </div>
    <br>
    <div class="box4">
        第一行是first-line伪元素内容
    </div>
</body>