伪类与伪元素区别
伪类与伪元素的区别
伪类：用于向某些选择器添加特殊的效果。
伪元素：用于向某些选择器内部的内容添加特殊效果。
伪类种类
:active //将样式添加到被激活的元素
:focus //将样式添加到获得焦点的元素
:hover //当鼠标悬浮在元素上方时，向元素添加样式
:link //将样式添加到未被访问的链接
:visited //将样式添加到被访问过的链接
:first-child //将样式添加到元素的第一个子元素，记住，这个为伪类！！！
:lang //允许创作者来定义指定的元素中使用的语言
伪元素种类
::first-letter //将样式添加到元素的文本首字母，只对块级元素有用
::first-line //将样式添加到元素的文本首行，只对块级元素有用
::before //在元素之前插入某些内容
::after //在元素之后插入某些内容
区别
这里用伪类:first-child和伪元素::first-letter来进行比较。
p>i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>
first单词会变为红色。
p:first-letter {color: red}
<p>I am stephen lee.</p>
字母 I 会变为红色。
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
但因为兼容性的问题（IE从9开始才支持双冒号伪元素写法），所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
THE END.