CSS伪元素

最新推荐文章于 2024-07-12 20:49:16 发布

「已注销」

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量43

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/m0_61216635/article/details/120272980

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::first-letter{
            font-size: 50px;
        }
        /* 第一个字母 */
        p::first-line{
            background-color: darkorchid;
        }
        /* 第一行 */
        p::selection{
            background-color: deepskyblue;
        }
        /* 选中内容 */

        div::before{
            content:'|' 
        }
        div::after{
            content: '|'
        }
    </style>
</head>
<body>
    <p>
        There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.
    </p>

    <div>hello hello hello</div>
</body>
</html>

2.a元素的伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
        color: blue;
        }
        /* 没访问过的链接 */
        a:visited{
        color: chartreuse;
        }
        /* 访问过的链接，考虑到隐私，这个伪类只能修改颜色 */
        a:hover{
        color: coral;
        }
        /* 鼠标移入变色 */
        a:active{
        color: cyan;
        }
        /* 鼠标点击变色 */
    </style>
</head>
<body>
    <a href="http://www.baidu.com">访问过的链接</a>
    <br><br>
    <a href="http://www.baidu123.com">没访问过的链接</a>
</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS伪元素

1.伪元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫