前言
可能刚入门的朋友会想到这样完成，再单独设置span的样式，
<a href="http://www.baidu.com">百度</a><span>|</span>
<a href="http://www.baidu.com">百度</a><span>|</span>
<a href="http://www.baidu.com">百度</a><span>|</span>
<a href="http://www.baidu.com">百度</a><span>|</span>
今天主要介绍怎么样用css3简单快速的完成这个效果（ie8不支持）
部分思路来自starkoverflow一名外国网友
css方法
| **1.选择 不是 a的父元素的最后一个子元素 的其他元素 设置after伪元素 内容为‘ | ’** |
a:not(:last-child):after {
content: '|';
} 解释读起来有点拗口，不过还是很好理解的，除了最后一个a标签，其他的后面都设置‘|’
至于两个a标签之间为什么有一点空隙，参考我之前的博客：两个inline-block消除间距和对齐（vertical-align）
| **2.选择 不是 a的父元素的第一个子元素 的其他元素 设置before伪元素 内容为‘ | ’** |
a:not(:first-child):before {
content: '|';
} 除了第一个a标签，其他的前面都设置‘|’
逻辑上相当于第一种反过来，但是样式上差别还是很明显的，显示出了这个隐藏换行空格带来的间隙。
3. 全部添加，最后一个重写覆盖
a:after
{
content: '|';
}
a:last-child:after
{
content: '';
}
| 每个元素后面都设置“ | ”，而最后一个元素再设置为空，其实是前两种方法的又一次变形。 |
| **4.选择紧接在a元素后的兄弟a元素 设置before伪元素 内容为‘ | ’** |
a+a:before{
content: '|';
} 效果和方法类似于第二个，用了相邻兄弟选择器
配合dom操作
$("a:not(:last)").append(" | ");
