css3-伪元素与伪类

伪元素用于定位文档中包含的文本，可是它表示DOM外部的某种文档结构

伪类:

伪类存在的意义是为了经过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。简单来讲，获取不存在与DOM树中的信息。好比<a>标签的:link、visited等，这些信息不存在于DOM树结构中，只能经过CSS选择器来获取；获取不能被常规CSS选择器获取的信息。好比伪类:target，它的做用是匹配文档(页面)的URI中某个标志符的目标元素。

常见的伪类和伪元素

下面看一下伪元素中最经常使用的before和after：

::before：选择器在被选元素的内容前面插入内容

::after     选择器在被选元素的内容后面插入内容

必须使用 content 属性来指定要插入的内容，不然伪元素没有任何意义。

content属性有几个很是有用的取值

 [String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：

 #example:before {

content: "#";
display: block;
width: 100px;
height: 100px;
}　

  attr() – 调用当前元素的属性，能够方便的好比将图片的 Alt 提示文字或者连接的 Href 地址显示出来。示例：

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

 url() / uri() – 用于引用媒体文件。示例：

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