开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情 Css伪类元素选择器
最近题主在准备web竞赛，复习了一下关于css伪类元素的知识
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
//本篇文章都使用这个结构代码来做演示
//lorem加上Tab键快速生成一段测试英文
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique consectetur quo recusandae eveniet magnam unde praesentium? Solzuta perspiciatis similique quae quos modi consequatur, ipsam atque libero cum mollitia nam possimus!</p>
</body>
🌵::first-letter ::first-letter表示第一个字母，例如：p::first-letter{}
代码演示📝
<style>
p::first-letter{
font-size: 30px;
color: blueviolet;
}
</style>
效果如图🎨
🌵::first-line ::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如： p::first-line{}
代码演示📝
<style>
p::first-line{
color: blue;
}
</style>
效果如图🎨
🌵::selection ::selection表示选中的内容
代码演示📝
<style>
p::selection{
color: aqua;
}
</style>
效果如图🎨
🌵::before和::after ::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用
代码演示📝
<style>
p::after{
content: "hahaha";
color: red;
}
p::before{
content: "hehehe";
color: coral;
}
</style>
效果如图🎨
注意：
before和after创建一个元素，但是属于行内元素。 新创建的这个元素在文档中是找不到的，所以我们称为伪元素。 before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。 伪元素选择器和标签选择器一样，权重为1。
