标签：
伪类与类相似，但又没有类附加标签上。伪类分为UI伪类和结构化伪类。
:link(将样式添加到未被访问的链接上)
:visted(将样式已添加到访问的链接上)
:hover(将样式添加到鼠标悬浮的元素上)
:active(将样式添加到被激活的元素上)
:focus(将样式添加到被选中的元素上)
:first-child(将样式添加到第一个子元素上)
:last-child(将样式添加到最后一个子元素上)
伪元素是在文档中若有实无的元素。
主要有以下几种
:first-letter(将样式添加到第一个字母)
:first-line(将样式添加到第一行)
:before(在某些元素前面插入某些内容)
:after(在某些元素后面插入某些内容)
看到:after，大家脑子里应该都能浮现出那个清除浮动的CSS的吧。没错，就是这个。
|
1
2
3
4
5
6
7
|
.clearfix:after {
content
:
"."
;
display
:
block
;
height
:
0
;
visibility
:
hidden
;
clear
:
both
;
}
|
仔细琢磨下它们的定义。
伪类的实现就好比给这个标签添加了一个虚拟的类。
举个栗子：
|
1
2
3
4
5
|
a:hover{
font-size
:
20px
;
color
:
red
}
<a href=
"#"
>Hello,World</a>
|
若不用伪类，实现同样的效果，需要这么做
|
1
2
3
4
5
|
.hover{
font-size
:
20px
;
color
:
red
}
<a href=
"#"
class=
"hover"
>Hello,World</a>
|
这么一对比，”伪类“就顾名思义了啊。
而伪元素则好比添加了一个新的标签。
|
1
2
3
4
5
|
p:first-letter{
font-size
:
20px
;
color
:
red
}
<p>Hello,World</p>
|
若不用伪元素，实现同样的效果，需要这么做
|
1
2
3
4
5
|
.first-letter{
font-size
:
20px
;
color
:
red
}
<p><span class=
"first-letter"
>H</span>ello,World</p>
|
因此总结下区分的方法：现实相同效果是需要添加一个类还是一个元素标签。
tips:
1.CSS3为了区别伪类和伪元素，明确使用单冒号来表示伪类，双冒号来表示伪元素。但为兼容性考虑，目前基本还是使用单冒号来表示。
2.搜索引擎不会搜索伪元素的信息。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容
参考资料：
《CSS设计指南》
http://www.jb51.net/css/67317.html
标签：
原文地址：http://my.oschina.net/sunshinewyf/blog/516791
