一、概念
-
CSS伪类 -------向某些选择器添加特殊的效果，要达到同等效果，通过类来达到效果 -
CSS伪元素 -------将特殊的效果添加到某些选择器，要达到同等效果，通过添加元素达到效果
伪类种类
伪元素种类
二、基本例子
伪类：
p>i:first-child {color;red}
p下边的第一个子元素的颜色为红色
<p>
<i>first</i>
<i>second</i>
</p>
要达到同等效果，可以这么实现：
.first-child {color;red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
即，通过设置class来实现
伪元素：
p:first-letter {color: red}
p元素的中文本的第一个字母，颜色为红色
<p>I am stephen lee.</p>
即字母I为红色
要达到同样效果，要讲字母I放在一个元素span中，再给span设置样式
.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>
区别：伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
三、其他例子
伪元素
1、向h1元素之前添加图片
h1:before
{
content:url(smiley.gif);
}
2、向h1元素之后添加图片
h1:after
{
content:url(smiley.gif);
}
3、为元素和css类结合
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
即，样式为article的p元素中的第一个字母的样式
伪类：
1、a伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
2、伪类和 css类
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
样式类为red的a元素已经访问的样式
3、伪类和组合选择器
p:first-child i { color:blue; }
p元素下的第一个元素里边的所有i元素的样式