前端学习笔记26-伪元素

最新推荐文章于 2024-08-27 22:40:09 发布

小欣CZX

最新推荐文章于 2024-08-27 22:40:09 发布

阅读量368

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/115960138

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记26-伪元素

问题引入
::first-letter
::first-line
::selection
::before和::after

问题引入

如果我想把一段文字的第一个字母设置大一点，可以这么写，

<!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>
        span{
            font-size: 50px;
        }
    </style>
</head>
<body>

    <p>
        <span>L</span> orem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
    </p>

</body>
</html>

在这里插入图片描述
但是这样很麻烦，每次都得单独写个span。所以，我们用伪元素来解决这个困扰。

::first-letter

作用：表示页面中一些特殊的并不真实存在的元素
看代码，

<!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;
        }
    </style>
</head>
<body>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
    </p>

</body>
</html>

::first-line

作用：表示第一行
代码，

        p::first-line{
            color:green;
        }

在这里插入图片描述

::selection

作用：表示选中的内容
看代码，

        p::selection{
            background-color: hotpink;
        }

这里粉色部分是因为我鼠标拖拽选中了，所以变色了。
在这里插入图片描述

::before和::after

before：元素的开始（不是第一个元素，是第一个元素的前面）
after：元素的最后（不是最后一个元素，是最后一个元素的后面）

这两个必须结合content属性使用。
这里用before演示一下

<!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>
        div::before{
            content: 'ac';
            color: hotpink;
        }
    </style>
</head>
<body>
    <div>
        hello
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
    </p>
</body>
</html>

显示效果
在这里插入图片描述
然后我发现了一个问题，上面这个是我用chrome浏览器的结果，如果我换成edge，它的结果是下图这个。

后面多了acac，我写的body里只有一个div，按照这个显示效果是有三个。右键检查，看看是什么。

还真多了两个在后面，这是啥，为啥chrome里没有？
我没深究，有搞清楚的小伙伴记得分享一下。