伪类和伪元素，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