伪类就是可以通过直接添加一个类样式达到同等效果，而伪元素，则需要先添加一个元素，然后在元素上添加样式才能达到同等效果
伪类
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
伪元素
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
:Pseudo-classes
::Pseudo-elements
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
一些常用的css伪元素和伪类的用法
通过css3伪类选择器： :nth-child() 可以选择表格或li等有规律元素的偶数行。
odd表示奇数行，even表示偶数行;
tr:nth-child(odd) {background-color: #333;}
tr:nth-child(even) {background-color: #f9f9f9;}
使用first-child和last-child伪类设置最后和第一个元素：
table tr:first-child {background: #eee}
table tr: last-child{background: #eee}
伪元素:before和:after用法
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。
//html
<p>ello Worl</p>
//css
p:before{
content: "H" /*:before和:after必带技能，重要性为满5颗星*/
}
p:after{
content: "d" /*:before和:after必带技能，重要性为满5颗星*/
}
结果输出“Hello World”