站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

css中::before是什么意思

时间:2021-12-27 [网络编程]作者:fabuyuan 浏览:6 次

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

css中::before是什么意思  2

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

css中::before是什么意思

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

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

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

css中::before是什么意思  2

<p class="test">
     2019/11/29 15:35:51
</p>//在这前面加一个小闹钟的图标就可使用::befor
.test::before
  {
   content: url(./1597910280\(1\).png);
 }

相同点:

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

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

不同点:

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

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

说明:

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视频教程

以上就是css中::before是什么意思的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css

转载请注明来源:css中::before是什么意思

本文永久链接地址:https://www.adminjie.com/post/6839.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 手把手教你CSS架构之SMACSS

      手把手教你CSS架构之SMACSS

      本篇文章给大家带来了关于css架构SMACSS的相关知识,其中会讲到什么是smacss以及该架构分类的相关问题,希望对大家有帮助。因为CSS只有一个作用域,...

    • 一起聊聊MySQL基础之触发器和事件

      一起聊聊MySQL基础之触发器和事件

      本篇文章给大家带来了关于mysql中触发器和事件的相关知识,其中包括触发器使用注意事项、查看和删除事件、事件使用注意事项等等,希望对大家有帮助。触发器我们使用M...

    • 使用jq如何删除css样式

      使用jq如何删除css样式

      删除方法:1、用removeClass()或toggleClass()移除指定CSS类,语法“removeClass("类名")”或“toggleClass("...

    • css3如何让盒子水平居中

      css3如何让盒子水平居中

      css3让盒子水平居中的方法:1、使用margin属性,给盒子元素添加“margin:0auto;”样式即可水平居中;2、利用flex弹性布局来实现水平居中...

    • 如何将css文件设置为utf-8

      如何将css文件设置为utf-8

      在css中,可以利用“@charset”规则来将字符编码设置为“utf-8”,该规则可以指定样式文件中使用的字符编码,语法为“@charset"UTF-8";...

    热门文章