::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用

双冒号(::)和单冒号(:)都用于表示伪元素,但它们在语法上有一些区别。

  • 双冒号(:😃:在CSS3中引入了双冒号语法,用于表示伪元素。它是较新的语法规范,建议在使用CSS3伪元素时使用双冒号。例如:::before、::after。

  • 单冒号(😃:在CSS2中引入了单冒号语法,最初用于表示伪类,如:hover、:active。然而,由于历史原因,单冒号也可以用于表示某些伪元素,如:before、:after。这种用法在CSS2中被允许,但在CSS3中不再推荐。

关于 ::before 和 ::after 伪元素的作用:

  • ::before 伪元素:用于在选定元素的内容前插入一个生成的内容。它允许在元素的开始位置插入额外的样式化内容,通常用于添加装饰性的元素或图标。例如,可以使用 ::before 创建一个元素的前置图标。

  • ::after 伪元素:用于在选定元素的内容后插入一个生成的内容。它允许在元素的结束位置插入额外的样式化内容,通常用于添加装饰性的元素或生成清除浮动的伪元素。例如,可以使用 ::after 创建一个元素的尾部装饰。

这两个伪元素的内容可以通过 content 属性来定义,并且可以与其他样式属性一起使用,如 display、position、color 等,以实现各种效果和布局需求。

总结:双冒号(::)是较新的语法规范,建议在使用CSS3伪元素时使用双冒号,而单冒号(:)可以用于表示某些伪元素,但不再推荐使用。::before 和 ::after 伪元素可以用于在元素的内容前后插入生成的内容,用于装饰、布局等目的。

#####除了::before和::after之外,还有哪些常用的CSS3伪元素?

除了 ::before 和 ::after,CSS3 还引入了一些其他常用的伪元素。以下是其中几个常见的 CSS3 伪元素:

  • ::first-line:用于选中元素的第一行文本,可以对其应用特定的样式。

  • ::first-letter:用于选中元素的第一个字母,可以对其应用特定的样式。

  • ::selection:用于选中文本时的样式,例如文本的背景色和文本颜色等。

  • ::placeholder:用于设置表单元素的占位符文本的样式,允许自定义占位符文本的颜色、字体等。

  • ::before 和 ::after 之外的伪元素还可以通过 content 属性生成内容,例如 ::marker 可用于自定义列表项标记的样式。

这只是一小部分常见的 CSS3 伪元素,CSS3 还引入了其他伪元素,如 ::nth-child、::last-child、::nth-of-type 等,用于选择特定的子元素或元素类型,并对其应用样式。

#####常见的单冒号(:)伪类有哪些?
单冒号(:)用于表示 CSS 中的伪类,它们是一些用于选择特定状态或特定位置的元素的类别。以下是一些常见的单冒号伪类:

  • :hover:当鼠标悬停在元素上时应用的样式。

  • :active:当元素被激活或被点击时应用的样式。

  • :focus:当元素获得焦点时应用的样式,通常在用户与表单元素进行交互时使用。

  • :visited:选择已访问过的链接的样式。

  • :first-child:选择父元素下的第一个子元素。

  • :last-child:选择父元素下的最后一个子元素。

  • :nth-child(n):选择父元素下的第 n 个子元素。

  • :nth-of-type(n):选择父元素下同类型元素中的第 n 个元素。

  • :not(selector):选择不满足指定选择器的元素。

  • :empty:选择没有子元素或者没有文本内容的元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/160720.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springBoot复杂对象表示和lombok的使用

springBoot复杂对象表示 前言简单案例lombok的使用通过properties文件进行绑定在yaml文件中使用 前言 对象:键值对的集合,如:映射(map)/哈希(hash)/字典(dictionary) 数组:一组按次…

leetcode做题笔记174. 地下城游戏

恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里,他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士的初始健康点数为一个正整数。如果他的健康点数在某一时刻降至 0…

Java应用性能问题诊断技巧

作者:张彦东 参考:https://developer.aliyun.com/ebook/450?spma2c6h.20345107.ebook-index.28.6eb21f54J7SUYc 文章目录 (一)内存1.内存2.内存-JMX3.内存-Jmap4.内存-结合代码确认问题 (二)CPU1.CPU-JMX或…

史上最短的“牛熊转换”:BTC价格昨夜起飞,但却来自一条假新闻!

昨夜,加密市场经历了史上最短的一次“牛熊转换”。 在短短10分钟内,BTC快速走出多根阳线,价格直接起飞,连续突破28000美元、29000美元、30000美元的整数关口,最高触及30535.8美元,涨幅近10%(数据…

Compose Canvas基础(2) 图形转换

Compose Canvas基础(2)图形转换 前言平移 translate缩放 scale旋转 rotate自定义绘图区域及绘制内边距inset组合转换 withTransform完整代码总结 上一篇文章 Compose Canvas基础(1) drawxxx方法 前言 阅读本文需要一定compose基…

mysql——面试题初体验

查询环境 1、student(学生表) 2、课程表(course) 3、教师表(teacher) 4、成绩表(score) 问题 (1) 查询所有学生的学号、姓名、选课数、总成绩 mysql> select s.s_id as 学号,s.s_name as 姓名 from student as s; ---------------- | 学号 | 姓名…

E138: Can‘t write viminfo file

E138: Can’t write viminfo file /home/xxx/.viminfo! 原因 进入/home/xxx/目录下,用ls -a你会发现有很多.viminfa.tmp - .viminfz.tmp 这种的临时文件,这是因为使用vim编辑器时,如果编辑器没有正常退出就会生成一个暂存文件,…

Flow深入浅出系列之更聪明的分享 Kotlin Flows

Flow深入浅出系列之在ViewModels中使用Kotlin FlowsFlow深入浅出系列之更聪明的分享 Kotlin FlowsFlow深入浅出系列之使用Kotlin Flow自动刷新Android数据的策略 Flow深入浅出系列之更聪明的分享 Kotlin Flows 使生命周期对上游流有效,以跳过不必要的工作。这是一…

使用kaliber与imu_utils进行IMU、相机+IMU联合标定

目录 1 标定工具编译 1.1 IMU标定工具 imu_utils 1.2 相机标定工具 kaliber 2 标定数据录制 3 开始标定 3.1 IMU标定 3.2 相机标定 3.3 相机IMU联合标定 4 将参数填入ORBSLAM的文件中 1 标定工具编译 1.1 IMU标定工具 imu_utils 标定IMU我们使用imu_utils软件进行标定…

Variations-of-SFANet-for-Crowd-Counting记录

论文:Encoder-Decoder Based Convolutional Neural Networks with Multi-Scale-Aware Modules for Crowd Counting 论文链接:https://arxiv.org/abs/2003.05586 源码链接:GitHub - Pongpisit-Thanasutives/Variations-of-SFANet-for-Crowd-C…

yarn : 无法加载文件 C:\Program Files\nodejs\yarn.ps1

问题描述: 问题分析: 这个错误提示说明在电脑系统上禁止运行 PowerShell 脚本,因此导致无法加载 Yarn 的安装脚本。这是由于系统的执行策略(Execution Policies)设置所导致的。 解决方法: 1. 以管理员身…

Ubuntu中不能使用ifconfig命令

​ 问题 打开终端使用如下命令不能运行: ifconfig显示如下错误: 解决方法 在VMware中的虚拟机下面打开“编辑虚拟机设置”,或者在已经打开的虚拟机面板上面打开“虚拟机—设置” 选择网络适配器,选择“NAT模式”,没开机的就…

Learning Sample Relationship for Exposure Correction 论文阅读笔记

这是中科大发表在CVPR2023的一篇论文,提出了一个module和一个损失项,能够提高现有exposure correction网络的性能。这已经是最近第三次看到这种论文了,前两篇分别是CVPR2022的ENC(和这篇文章是同一个一作作者)和CVPR20…

ardupilot开发 --- 起飞前后 篇

起飞前检查 电机响应是否正确(转向)姿态响应是否正常(roll pitch yaw)GPS数据是否正常(星数,RTK信号)电源电压安全开关安全检测(armed pre check) 起飞前的必调参数 机…

mmlab 做实验

首先 下载项目完整代码,在pycharm中打开 1. comfig 中有各种网络模型,可以直接使用训练好的预训练模型,尽量不要改动网络模型的结构 2. 18表示网络机构18层,8是每个卡的batch,cifar10 是数据集 3.配置文件解析 4. …

工业机器视觉系统构成及功能

工业机器视觉系统构成及功能 工业机器视觉系统由光源、光学传感器、图像采集设备、图像处理设备、机器视觉软件、辅助传感器、控制单元和执行机构等组件构成。 光源提供光线以辅助图像获取。 光学传感器将外部场景转换为电信号。 图像采集设备将信号转换为图像数据&#xf…

VSCode连接代理

VSCode连接代理 首先有代理 然后在设置里搜代理 然后再在windows的设置–>网络–>代理 拼接上就行 最后重启

【小尘送书-第八期】《小团队管理:如何轻松带出1+1>2的团队》

大家好,我是小尘,欢迎你的关注!大家可以一起交流学习!欢迎大家在CSDN后台私信我!一起讨论学习,讨论如何找到满意的工作! 👨‍💻博主主页:小尘要自信 &#x1…

macos 12 支持机型 macOS Monterey 更新中新增的功能

macOS Monterey 能让你以全然一新的方式与他人沟通联络、共享内容和挥洒创意。尽享 FaceTime 通话新增的音频和视频增强功能,包括空间音频和人像模式。通过功能强大的效率类工具(例如专注模式、快速备忘录和 Safari 浏览器中的标签页组)完成更…

【unity】【VR】白马VR课堂系列-VR开发核心基础04-主体设置-XR Rig的引入和设置

接下来我们开始引入并构建XR Rig。 你可以将XR Rig理解为玩家在VR世界中的替身。 我们先删除Main Camera,在Hierarchy右键点击删除。 然后再在场景层右键选择XR下的XR Origin。这时一个XR Origin对象就被添加到了Hierarchy。 重设XR Origin的Position和Rotation…