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(" | ");

 

转载于:https://www.cnblogs.com/coderL/p/7732874.html