css伪元素选择器有哪些_css3伪选择器

全栈程序员-站长 • 2025年6月3日上午8:22 • 未分类 • 阅读 2

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

//本篇文章都使用这个结构代码来做演示
//lorem加上Tab键快速生成一段测试英文
<body>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique consectetur quo recusandae eveniet magnam unde praesentium? Soluta perspiciatis similique quae quos modi consequatur, ipsam atque libero cum mollitia nam possimus!</p>
</body>

Jetbrains全家桶1年46，售后保障稳定

?::first-letter

::first-letter表示第一个字母，例如：p::first-letter{}

代码演示?

    <style>
        p::first-letter{
            font-size: 30px;
            color: blueviolet;
        }
    </style>

效果如图?

css伪元素选择器有哪些_css3伪选择器

?::first-line

::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如： p::first-line{}

代码演示?

    <style>
        p::first-line{
            color: blue;
        }
    </style>

效果如图?

?::selection

::selection表示选中的内容

代码演示?

    <style>
        p::selection{
            color: aqua;
        }
    </style>

效果如图?

css伪元素选择器有哪些_css3伪选择器

?::before和::after

::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用

代码演示?

    <style>
        p::after{
            content: "hahaha";
            color: red;
        }
        p::before{
            content: "hehehe";
            color: coral;
        }
    </style>

效果如图?

css伪元素选择器有哪些_css3伪选择器