我们都知道，页面样式通常都是用CSS规则写的。但是有时候为了实现一些特殊的效果，往往会用到JavaScript。最佳实践当然是职责分离：CSS用于表示，HTML用于结构，JavaScript用于行为。所以样式可以用CSS解决，尽量不要用JavaScript。这使得代码更简洁，更易于维护，性能也更好。本文将介绍5个你可能从未听说过或使用过的CSS伪元素。一起来看看吧！什么是伪元素？伪元素和伪类是CSS初学者容易混淆的两个概念。伪元素：是附加在选择器末尾的关键字，允许你修改被选元素特定部分的样式。例如::before、::after、::first-letter等。它是关于创建一个不存在的内容“元素”，并为其附加样式。伪类：不创建元素内容，而是选择某些状态下已有的元素并附加样式。例如：first-child、:active、:focus等。伪元素和伪类之所以容易混淆，是因为它们的作用相似，写法相同。但实际上，为了区分两者，CSS3已经明确规定伪类用一个冒号表示，而伪元素用两个冒号表示。:Pseudo-classes//Pseudo-classes::Pseudo-elements//伪元素但是因为兼容性问题，大部分还是统一单冒号。但是，我们在写作的时候要尽量养成良好的习惯，区分两者。下面一一介绍这五个伪元素。1::first-letter为块级元素第一行的第一个字符设置样式，该字符之前没有其他内容（如图片或内联表格），仅对块级元素生效元素。这个伪元素在博文中经常用到，例如：::first-letter用伪类实现起来比较简单：p{width:500px;line-height:1.5;}h2+p::first-letter{color:white;background-color:black;border-radius:2px;box-shadow:3px3px0red;font-size:250%;padding:6px3px;margin-right:6px;float:left;}如果你不用这个伪类来实现同样的效果想想都麻烦。2::first-line类似于::first-letter，用于设置第一行文本或块级元素的样式。::first-line{color:blue;text-transform:uppercase;/*警告：这些样式不起作用*//*许多属性在::first-line伪元素*/margin-left中无效：20px;text-indent:20px;}::first-line{3::selection设置用户选中元素的高亮样式。对这个伪元素生效的样式属性只有三个：颜色背景属性（background-color、background-image等）text-shadow::selection4::backdrop这个伪元素有点陌生，就是与视口框大小相同，当页面处于全屏模式时它充当背景。例如用它来设置全屏视频的背景色：video::backdrop{background-color:#448;}::backdrop5::placeholder或
