前端中伪元素选择器的使用方法（详解）

最新推荐文章于 2023-08-07 22:05:49 发布
最新推荐文章于 2023-08-07 22:05:49 发布
阅读量506 收藏
点赞数
分类专栏： 基础 文章标签： 伪元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43567965/article/details/88088710
版权

 

伪对象即伪元素，表示DOM外部的某种文档结构。

伪元素改变文档结构，在结构外另加一个没有实际存在的元素（即伪元素）。

伪元素 是行内元素，大小由内容决定

常用伪元素：

1）E:before/E::before

2）E:after/E::after

 

赵小七--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习：伪类、伪元素的使用
wang_lil的博客
07-04 1100
所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。本篇文章主要介绍基础伪类和伪元素的使用。
CSS伪类/伪元素选择器整理
09-25
CSS伪类及伪元素选择器，如超链接的a：link、a：visited、a：hover等等，本文整理了一些，喜欢的朋友可以收藏下
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
CSS基础知识（一）：选择器
前端
10-21 762
文章目录前言一、CSS基础知识二、选择器1.选择器2.基础选择器2.1 标签选择器2.2 类选择器2.3 id选择器2.4 通配符选择器2.5 基础选择器总结3.复合选择器3.1 后代选择器3.2 子元素选择器3.3 并集选择器3.4 相邻兄弟选择器3.5 复合选择器总结4.伪类选择器4.1 动态伪类选择器4.2 UI元素状态伪类选择器4.3 结构伪类选择器4.4 否定伪类选择器5.伪元素选择器5.1 :before选择器5.2 :after选择器5.3 :first-line选择器5.3 :first-l
如何用阿里iconfont，在伪元素选择器content:‘‘中添加文字标签
huayinuan的博客
08-16 971
使用Unicode 引用 一、下载字符，解压后打开文件 二、打开iconfont.css文件 三、Unicode 引用 四、 把下载解压后的文件夹拷贝到根目录下，你可以把文件重命名，例如font。 五、重点 1.路径一定要对，直接复制过来的路径粘贴上去那就出问题了。 2.阿里复制来的字符是这样的 把前面的&#x改成\ ，去掉后面的； 3.因为伪类选择器无法添加class，我们只要给他的父亲添加class就好了。 ...
前端学习day24：选择器高级
ysccsyysc的博客
05-30 87
1. 选择器初级复习 写法 名称 举例 * 通配选择器 *{ margin:0; padding:0; } 标签名 元素选择器 div{ width:50px; height:50px; } .class名 class选择器 .nav{ width:20px; } #id名 id选择器 #header{ width:50px; } 父 子 孙…… 后代选择器 #header div p{ margin:10px;
前端之常见的实用伪元素
qq_36625232的博客
01-05 1198
一丶伪类元素选择器：【类名或者id+：+伪元素】 1.：hover：当鼠标移进去的时候，添加样式 如图“ 鼠标在外边： 鼠标进去的时候 ，div 变小 也出现背景颜色 除了用在div还可以用在文本 等其他地方 学以致用 活学活用 举一反三。 2.：first-line：改变文本第一行的样式 3.：first-letter：改变第一个字的样式 或者第一个字母的样式 3.：before：在前面插入...
前端之伪类、伪元素
weixin_46372074的博客
03-04 1797
前端之伪类、伪元素伪类、伪元素是选择器？？？伪类？伪类的简单示例 伪类、伪元素是选择器？？？ 选择器的数量众多，使用目的明确。 了解使用方法后查阅列表进行使用。 伪类？ 选择器的一种，用于选择处于特定状态的元素。如： 同类型元素的第一个 鼠标悬浮在元素上 …… 它们的样式会发生改变，就像是应用了一个类。 作用：减少类的使用。 格式：伪类以冒号开头。 伪类的简单示例 ...
伪元素使用详解（超详细版）
王二狗
05-06 1万+
1. :after ::after 单双引号的区别其实无论是单引号还是双引号，他们的本质都是伪元素，只不过因为伪类使用的也是单引号，同时他们的写法类似，写法也相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。2.使用伪元素需要注意
CSS选择器（二）——伪元素选择器
qq_39820671的博客
10-15 748
目录 一：伪元素选择器介绍 二：伪元素选择器的使用 （一）：使用::first-line选择器 （二）：使用::first-litter选择器 （三）：使用:before和:after选择器 （四）: 使用CSS计数器 一：伪元素选择器介绍 CSS定义了伪选择器（pseudo-selector），它们提供了更复杂的功能，但并非直接对应HTML文档定义的元素。 微选择器分两种：...
如何使用伪元素::before和::after?
金木讲编程
08-07 565
伪元素(::before和::after)是CSS中非常有用的特性，它们允许你在元素的内容之前或之后插入额外的内容，并且不需要在HTML结构中添加额外的标记。你可以为伪元素设置宽度、高度、背景颜色、边框等样式。请注意，伪元素只能用于具有content属性的元素，因为伪元素实际上是在元素内容之前或之后插入的额外内容。伪元素的默认定位是相对于其父元素的，它会出现在内容的前面或后面。伪元素必须配合content属性使用，即使你不想在伪元素中显示任何文本内容，也需要指定一个空内容，否则伪元素将不会被显示。
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
11-21
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
字体图标（以建两个css和伪元素选择器、unicode方式引入）
m0_47974640的博客
10-03 256
1， 2.复制链接，进入链接 3.chtrl+a，全选复制，在粘贴到自己建立的css包中，这里命名为iconfont.css； 4.建一个css来使用iconfont.css,这里命名为fonts.css， 两个css的content要一样。fonts.css要加上font-family：“iconfont”; 以后项目需要增加图标，只需这几步，在iconfont.css复制新的内容进去，再使用即可。 5.不用伪元素选择器，用unicode码，！记得加class=“iconfont” 完成~
伪类选择器和伪元素
qq_38053677的博客
07-02 197
伪类选择器 伪类选择器有以下6种： 动态伪类： 锚点伪类 用户行为伪类 目标伪类 UI元素状态伪类 否定伪类选择器 语言伪类选择器 CSS3结构伪类 动态伪类 这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来 锚点伪类 link visited hover active（一定要按照这个顺序写） 用户行为伪类 hover active focus 目标伪类 用于命名锚记 <!DOCTYPE html> <html lang="en"&gt
伪元素选择器应用场景
weixin_56917972的博客
08-24 441
伪元素选择器应用场景
web前端css伪元素使用阿里iconfont中Unicode编码
weixin_44827068的博客
10-03 929
web前端css伪元素使用阿里iconfont中Unicode编码 1 在阿里iconfont中创建项目 新建项目 搜索自己想要的图标并添加入库 点击购物车 添加至项目 回到“我的项目”，点击“下载至本地”，可以下载到web项目的根目录 解压后把包含.iconfont.css文件的文件夹链接进项目 从iconfont.css中复制下面这一段到自己项目的css文件中 可以看到图标的Unicode编码，在css中可以用斜杠“\r60b” html中 css中 上图中的“font-f
CSS（三）-- 伪类选择器与伪元素选择器
PUYALEI的博客
04-30 1537
3. 第一个、最后一个、奇数偶数元素：可以用伪类选择器选择第一个、最后一个以及奇数偶数位置上的元素，并应用相应的样式。1. 链接样式：可以用伪类选择器设置不同状态下的链接样式，如未访问过链接、访问过链接、鼠标悬停链接等。伪元素选择器可以设置列表项的标记符号的样式，例如指定它的颜色或将它移动到列表项的外部。2. 表单元素：可以用伪类选择器设置表单元素在不同状态下的样式，如焦点、悬停、选中等。4. 已被禁用的元素：可以用伪类选择器选取已经被禁用的表单元素，并应用相应的样式。给元素的第一行或第一个字母应用样式。
Web前端——CSS伪类和伪元素
qq_25592087的博客
09-27 1604
可以理解为描述元素的某种状态，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。可以理解为某个元素的子元素，但不存在于html中。用于创建一些不在文档树中的元素，并为其添加样式。标签::伪类{设置的样式，伪类可以与 CSS 类配合使用}标签:伪类{设置的样式，伪类可以与 CSS 类配合使用}
linux命令大全---入门篇（菜鸟必会）
热门推荐
趙尒七
03-23 1万+
目录 1.开关机命令 2.ifconfig 查看ip 地址 3.和用户相关： 4.文件权限相关及控制 5.防火墙 6.ls命令 7.cd切换 8.pwd 查看当前工作目录路径 9.mkdir 创建文件夹 10.rm 删除文件 11.rmdir 删除空目录 12、mv 移动、修改文件名 13.cp 复制 1.开关机命令 reboot i...
css3伪元素选择器
最新发布
08-24
CSS3伪元素选择器是用来在HTML元素的特定位置插入内容或样式的选择器。伪元素选择器使用两个冒号(::)表示。常见的CSS3伪元素选择器有::before和::after。 举个例子，假设我们有一个div元素，我们可以使用::before伪元素选择器在该div元素的前面插入内容，使用::after伪元素选择器在该div元素的后面插入内容。具体的CSS代码如下： ```css div::before { content: "在div前面插入的内容"; } div::after { content: "在div后面插入的内容"; } ```<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【CSS3】CSS3 伪元素选择器 ( 伪元素选择器语法简介 | 伪元素选择器权重计算 | 代码示例 )](https://blog.csdn.net/han1202012/article/details/130269949)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值