小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
前言
我们都知道，页面样式通常写在 CSS 规则里。但有时候为了实现一些特殊的效果，往往会借助 JavaScript。最佳实践当然是职责分离：CSS 负责表现，HTML 负责结构，JavaScript 负责行为。所以，样式上能用 CSS 解决的，尽量不用 JavaScript。这样代码更简洁、易维护，性能也更好。
本文将介绍 5 个 CSS 伪元素，你可能从来没听说过，或者没用过。一起来看看吧！
::first-letter
对块级元素第一行的第一个字符设置样式，并且这个字符前面没有其他内容（例如图片或者内联表格），只对块级元素生效。这个伪元素在博客文章用得比较多，比如：
用伪类实现就比较简单了：
html
<div>
<p>对块级元素第一行的第一个字符设置样式，并且这个字符前面没有其他内容（例如图片或者内联表格），只对块级元素生效。</p>
</div>
css
p {
line-height: 1.5;
}
p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px3px0 red;
font-size: 250%;
padding: 6px3px;
margin-right: 6px;
float: left;
}
效果：
::first-line
跟::first-letter类似，用于设置文本或者块级元素的第一行内容的样式。
html
<div>
<p>跟`::first-letter`类似，用于设置文本或者块级元素的第一行内容的样式。</p>
<p>跟`::first-letter`类似，用于设置文本或者块级元素的第一行内容的样式。</p>
<p>跟`::first-letter`类似，用于设置文本或者块级元素的第一行内容的样式。</p>
<p>跟`::first-letter`类似，用于设置文本或者块级元素的第一行内容的样式。</p>
</div>
css
div::first-line {
color: blue;
text-transform: uppercase;
/* WARNING: 这些样式不起作用 */
/* 很多属性在 ::first-line 伪元素里是无效的 */
margin-left: 20px;
text-indent: 20px;
}
效果
::selection
匹配被用户选取的选取是部分。只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
html
<h1>请试着选取页面上的文本</h1>
<p>这是一个段落。</p>
<div>这是 div 元素中的文本。</div>
css
::selection {
color: #ff0000;
background-color: aqua;
}
::-moz-selection {
color: #ff0000;
background-color: aqua;
}
效果
可以看见我们选中的文本变成了我们设置的颜色，是不是很神奇？
::backdrop
Experimental: 这是一个实验中的功能此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。 这个伪元素有点面生，它是跟 viewport 大小一致的盒子，当页面处于全屏模式时充当背景。比如利用它设置全屏视频的背景色：
示例
video::backdrop { background-color: #448; }
效果
注意当 backdrop 可见时，上下两部分的暗蓝灰色的信箱效果。这个区域一般是黑色的，但上面的 CSS 语句修改了它的外观。
::placeholder
::placeholder 选择器用于选取带有占位符文本的表单元素，并让您设置占位符文本的样式。
占位符文本使用 placeholder 属性设置，这个属性规定描述输入字段期望值的提示文本。
提示：在大多数浏览器中，占位符文本的默认颜色为浅灰色。
html
<input type="text" name="fname" placeholder="First name">
css
::-webkit-input-placeholder { /* Edge */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer */
color: red;
}
::placeholder {
color: red;
}
效果
这个背景是因为我写的时候时间上正好触发了浏览器的夜间模式了，颜色变了不是这个样式的问题哈！
小结
这几个比较好玩的CSS 伪元素就给大家献上啦，希望大家可以用得上！
彦祖看到这里了觉得有用就留个赞吧！求评论求收藏
