0

0

css中::before是什么意思

WBOY

WBOY

发布时间:2021-12-22 14:31:59

|

27419人浏览过

|

来源于php中文网

原创

css中“::before”的意思是“在...之前”,是一个伪类元素,用于创建一个伪元素,并将其设置为选中元素的第一个子元素,插入到元素的其他内容之前,语法为“element::before{样式代码}”。

css中::before是什么意思

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css中::before是什么意思

在css中,::before 是一个伪类元素,代表生成的内容元素,表示相应元素的可抽象样式的第一个子元素,即:所选元素的第一个子元素。

利用::before可以把需插入的内容插入到元素的其他内容之前,并且默认内联显示。::before需要使用content属性来指定内容的值。

立即学习前端免费学习笔记(深入)”;

::befor使用场景(比如在一个元素前面加一个图标)

2019/11/29 15:35:51

//在这前面加一个小闹钟的图标就可使用::befor
.test::before
  {
   content: url(./1597910280\(1\).png);
 }

相同点:

1、伪类对象,用来设置对象前的内容

2、::before和:before写法是等效的

不同点:

:befor是Css2的写法,::before是Css3的写法

:before的兼容性要比::before好 ,不过在H5开发中建议使用::before比较好

说明:

思乐微信商城微分销系统
思乐微信商城微分销系统

思乐微信商城微分销系统是以.net+access/mssql进行开发的微信分销系统。基于微信朋友圈的传播,是打造以分销商为中心的全新微信分销体验。让粉丝实时有效的获取朋友圈流量并快速分享购买分佣。因为是基于微信,所以要在微信上体验才更好。关注我们的微信核心功能:1、自动提示用户关注微信,解决一般程序无关注微信公众号的过程2、只要通过链接进一次,不过好久注册,什么方面注册,只要是用微信注册的,都会算

下载

1、伪类元素要配合content属性一起使用

2、伪类元素是css渲染层加入的,不能通过js来操作

3、伪类对象特效通常通过:hover伪类样式来激活

我觉得这个有点鸡肋,可用可不用。

伪元素和伪类得区别

  • 伪类

      伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。css伪类用于向某些选择器添加特殊的效果。

  • 伪元素

   伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如::before表示选
择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。  css伪元素用于向某些选择器设置特殊效果。              

2) 语法区别

  在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

3) 伪类/伪元素一览表

:active 选择正在被激活的元素 1
:hover 选择被鼠标悬浮着元素 1
:link 选择未被访问的元素 1
:visited 选择已被访问的元素 1
:first-child 选择满足是其父元素的第一个子元素的元素 2
:lang 选择带有指定 lang 属性的元素 2
:focus 选择拥有键盘输入焦点的元素 2
:enable 选择每个已启动的元素 3
:disable 选择每个已禁止的元素 3
:checked 选择每个被选中的元素 3
:target 选择当前的锚点元素 3


::first-letter 选择指定元素的第一个单词 1
::first-line 选择指定元素的第一行 1
::after 在指定元素的内容后面插入内容 2
::before 在指定元素的内容前面插入内容 2
::selection 选择指定元素中被用户选中的内容 3

伪类与类优先级相同,伪元素与标签优先级相同。顺便说一下优先级怎么判断,一般是 !important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。还有一个简单的计算方法,内联样式表的权值为 1000,ID 选择器的权值为 100,Class 类选择器的权值为 10,HTML 标签选择器的权值为 1,权值实际并不是按十进制计算的,用数字表示只是说明思想,我们可以把选择器中规则对应做加法,比较权值大小,权值越大优先级越高,如果权值相同前面的样式会被后面的覆盖。

(学习视频分享:css视频教程

相关专题

更多
Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

公务员递补名单公布时间 公务员递补要求
公务员递补名单公布时间 公务员递补要求

公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

44

2026.01.15

公务员调剂条件 2026调剂公告时间
公务员调剂条件 2026调剂公告时间

(一)符合拟调剂职位所要求的资格条件。 (二)公共科目笔试成绩同时达到拟调剂职位和原报考职位的合格分数线,且考试类别相同。 拟调剂职位设置了专业科目笔试条件的,专业科目笔试成绩还须同时达到合格分数线,且考试类别相同。 (三)未进入原报考职位面试人员名单。

58

2026.01.15

国考成绩查询入口 国考分数公布时间2026
国考成绩查询入口 国考分数公布时间2026

笔试成绩查询入口已开通,考生可登录国家公务员局中央机关及其直属机构2026年度考试录用公务员专题网站http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/examResult/written_result.html,查询笔试成绩和合格分数线,点击“笔试成绩查询”按钮,凭借身份证及准考证进行查询。

11

2026.01.15

Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

65

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

36

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

75

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

35

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 19万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号