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