伪类和伪元素概念

伪元素：伪元素主要是用来创建一些不存在于原有dom结构树中的元素。

例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素，如：div::before。

::before和::after这两个伪类下有特有的属性content，必须有这个属性。

1、attr() 调用当前元素的属性，可以方便的比如将图片的Alt提示文字或链接的Href地址显示出来，如下：

　　a:after {
　　　　content: "(" attr(href) ")";
　　}

2、url() / uri() 用于引入媒体文件

　h1:before{
　　　　content: url(log.png);
　　}

3、counter() 调用计数器，可以不使用列表元素实现序号功能。

　　h2:before{
　　　　counter-increment: chapter;
　　　　content: "Chapter" counter(chapter) ". "
　　}

伪类：表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。

例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素，如：a:hover