css中的伪类和伪元素

伪类

伪类与类类似，但又没有类附加标签上。伪类分为UI伪类和结构化伪类。

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设计指南》

详解 CSS 属性 - 伪类和伪元素的区别

http://www.jb51.net/css/67317.html