【06.伪元素的选择器学习】_伪::selection 元素选中后没有取消-CSDN博客

本文链接：https://blog.csdn.net/chenshuangzhi/article/details/126084495

伪元素

表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用::开头

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容（鼠标选中的内容）

::before 表示元素的开始位置

::after表示元素的最后位置

-before 和 after 必须结合content属性来使用,属性值要用""包起来

<!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>伪元素的选择器</title>

    <style>

    p:first-of-type::first-letter{
            font-size: 50px;
            color: blue;
        }

    p::first-line{
            color: purple;
            font-size: 40px;
        }

    p::selection{
            color: aqua;
        } 

    /* 在每个p元素开头都加上了wahaha */
    p::before{
            content: "wahaha";
            color: aqua;
            font-size: 40px;
        }

    /* 在每个p元素最后都加上了xixixixi */
    p::after{
            content: "xixixixi";
            color: purple;
            font-size: 40px;
        }

    </style>
</head>
<body>
    <q>jjchen</q>
    <div>我是jjchen</div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum accusantium debitis, corrupti perferendis at laudantium animi vero minima sunt soluta maxime quibusdam quisquam neque ipsam porro minus aperiam commodi excepturi.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum accusantium debitis, corrupti perferendis at laudantium animi vero minima sunt soluta maxime quibusdam quisquam neque ipsam porro minus aperiam commodi excepturi.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum accusantium debitis, corrupti perferendis at laudantium animi vero minima sunt soluta maxime quibusdam quisquam neque ipsam porro minus aperiam commodi excepturi.</p>
</body>
</html>

此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习