伪类和伪元素，review

老是分不太清楚，而后容易忘记这个概念，项目中又遇到了，复习一遍

问题

1.哪些经常使用的伪类？伪元素？

怎么记：
除了4个伪元素，其余都是伪类

哪四个伪元素？:before :after :first-letter :first-line

伪类
:first-child
:link
:visited
:hover
:active
等

2.伪类和伪元素的区别

想一想经常使用:before :after 用来干吗？

遇到的比较多的是在元素先后插入图片，或者清除浮动

h1:before
  {
  content:url(logo.gif);
  }

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

.clearfix:after{
    content:"";             /*设置内容为空*/
    height:0;               /*高度为0*/
    line-height:0;          /*行高为0*/
    display:block;          /*将文本转为块级元素*/
    visibility:hidden;      /*将元素隐藏*/
    clear:both;             /*清除浮动*/
}
.clearfix{
    zoom:1;                 /*为了兼容IE*/
}

定义：

伪元素是创造文档树以外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after可以访问产生的内容。

想一想经常使用伪类用来干吗？

匹配元素

a:link {color:#FF0000;} /* 未访问的连接 */
a:visited {color:#00FF00;} /* 已访问的连接 */
a:hover {color:#FF00FF;} /* 鼠标划过连接 */
a:active {color:#0000FF;} /* 已选中的连接 */

选择器匹配做为任何元素的第一个子元素的 <p> 元素

p:first-child
{
    color:blue;
}

定义

伪类其实就是基于普通DOM元素而产生的不一样状态，他是DOM元素的某一特征。

3.总结

一句话总结不一样之处就是，伪元素产生新对象，在DOM树中看不到，可是能够操做；伪类不产生新的对象，仅是DOM中一个元素的不一样状态；

css3中，为了区别和标准化，伪元素修改成以 :: 开头，但由于历史缘由，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。

参考资料

文章1
文章2