css3伪元素选择什么,css3巧用选择器配合伪元素

Bertha 。 2022-09-03 01:29 248阅读 0赞

一 . 前言

有时我们在写底部导航栏时，会有很多超链接，每个链接间用“|”分割，如下图：

![bb6df385d03a63b8a3426b7a487f2ea7.png][]

可能刚入门的朋友会想到这样完成，再单独设置span的样式，

今天主要介绍怎么样用css3简单快速的完成这个效果(ie8不支持)

[百度][Link 1]|

二 . css方法

1.选择 不是 a的父元素的最后一个子元素 的其他元素 设置after伪元素 内容为‘|’

a:not(:last-child):after \{

content: '|';

解释读起来有点拗口，不过还是很好理解的，除了最后一个a标签，其他的后面都设置‘|’

至于两个a标签之间为什么有一点空隙，参考我之前的博客：两个inline-block消除间距和对齐

![ab105611d70be07d794eb19161c9d18f.png][]

2.选择 不是 a的父元素的第一个子元素 的其他元素 设置before伪元素 内容为‘|’

a:not(:first-child):before \{

content: '|';

除了第一个a标签，其他的前面都设置‘|’

逻辑上相当于第一种反过来，但是样式上差别还是很明显的，显示出了这个隐藏换行空格带来的间隙。

![90993dc56d25361d1121d7a0fd3df9a5.png][]

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新增(选择器&lbrace;属性选择器，结构伪类选择器，伪元素选择器&rcub;)

1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E \[ att \]   选择具有 att 属性的 E 元素   例如:input \[ value ...

CSS选择器之伪类选择器(伪元素)

selection \[CSS4\]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 &lt ...

python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)

11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性

CSS伪类选择器和伪元素选择器

CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link\{ba ...

随机推荐

代码的坏味道(7)——临时字段&lpar;Temporary Field&rpar;

坏味道--临时字段(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. ...

集合源码分析&lbrack;2&rsqb;-AbstractList 源码分析

AbstractList 类型:抽象类 接口的继承以及实现关系 继承AbstractCollection 实现List接口 典型方法实现解析 public List subList( ...

MongoDB的一些CURD操作

MongoDB的一些增删改查命令操作: 官方文档参考  https://docs.mongodb.com/manual/reference/method/ https://docs.mongodb.c ...

&lbrack;0403&rsqb;学习一个——苟(简单Java开发)

学习一个--苟 1. 开发目的 拜读了某神犇的blog,感到了自身深深的不足.蒟蒻如我,决定提高一蛤自身的姿势水平,学习一个,使用Java重写用GreatestLanguage写的某小说网站的抓取器. ...

sql中union 和 union all的区别

最近发现一个视图出奇的慢,在生产环境还好,由于服务器配置较高,没有察觉出来.但是做了一次修改后在开发版 和测试版就直接查询不出结果了.就连select count(1) from 都运行2个小时没有结 ...

[bb6df385d03a63b8a3426b7a487f2ea7.png]: /images/20220829/2c87befe59664bf281a23b49536b3264.png
[Link 1]: http://www.baidu.com
[ab105611d70be07d794eb19161c9d18f.png]: /images/20220829/444de2f17ebf46fabe18f5828ee6f8c1.png
[90993dc56d25361d1121d7a0fd3df9a5.png]: /images/20220829/03d2e935061644b3b0cb3991ca1d151d.png