一 . 前言
有时我们在写底部导航栏时,会有很多超链接,每个链接间用“|”分割,如下图:
可能刚入门的朋友会想到这样完成,再单独设置span的样式,
今天主要介绍怎么样用css3简单快速的完成这个效果(ie8不支持)
百度|
百度|
百度|
百度|
二 . 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(" | ");
如何使用CSS3中的结构伪类选择器和伪元素选择器
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...
css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
CSS3新增选择器:伪元素选择器
一. ::first-letter 第一个字 二. ::first-line 第一行(以浏览器为准的第一行) 三. ::selection 被选中的字行(鼠标选中的字段)只能向 ::selectio ...
CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
CSS选择器之伪类选择器(伪元素)
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性
CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
随机推荐
代码的坏味道(7)——临时字段(Temporary Field)
坏味道--临时字段(Temporary Field) 特征 临时字段的值只在特定环境下有意义,离开这个环境,它们就什么也不是了. 问题原因 有时你会看到这样的对象:其内某个实例变量仅为某种特定情况而设 ...
vs2015全新nuget使用全析
随着vs2015正式版本的发布,实在按捺不住,安装体验了一把,感触最大的除了可以调试lamda以外莫过于对nuget的升级. 先来一张全景: 怎么样,风格完全不同了吧.可以显示预发行版本了,右上角那个 ...
virtual析构函数的作用
C++ Primter中讲“在 C++ 中,基类必须指出希望派生类重写哪些函数,定义为 virtual 的函数是基类期待派生类重新定义的,基类希望派生类继承的函数不能定义为虚函数”. 析构函数是为了在 ...
在Flex中使用文件系统
一.File和FileStream对象File和FileStream是AIR文件系统中,重要的组成部分,File对象有许多属性,用于唯一区别它与文件系统上的其他文件对象,属性包括:url/native ...
centos如何安装python库?
通过yum install安装,先解决yum不能安装python库的问题 yum install -y epel-release #先安装epel源,参考http://sharadchhetri. ...
集合源码分析[2]-AbstractList 源码分析
AbstractList 类型:抽象类 接口的继承以及实现关系 继承AbstractCollection 实现List接口 典型方法实现解析 public List subList( ...
MongoDB的一些CURD操作
MongoDB的一些增删改查命令操作: 官方文档参考 https://docs.mongodb.com/manual/reference/method/ https://docs.mongodb.c ...
[0403]学习一个——苟(简单Java开发)
学习一个--苟 1. 开发目的 拜读了某神犇的blog,感到了自身深深的不足.蒟蒻如我,决定提高一蛤自身的姿势水平,学习一个,使用Java重写用GreatestLanguage写的某小说网站的抓取器. ...
sql中union 和 union all的区别
最近发现一个视图出奇的慢,在生产环境还好,由于服务器配置较高,没有察觉出来.但是做了一次修改后在开发版 和测试版就直接查询不出结果了.就连select count(1) from 都运行2个小时没有结 ...