css中“::before”的意思是“在...之前”,是一个伪类元素,用于创建一个伪元素,并将其设置为选中元素的第一个子元素,插入到元素的其他内容之前,语法为“element::before{样式代码}”。
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css中::before是什么意思
在css中,::before 是一个伪类元素,代表生成的内容元素,表示相应元素的可抽象样式的第一个子元素,即:所选元素的第一个子元素。
利用::before可以把需插入的内容插入到元素的其他内容之前,并且默认内联显示。::before需要使用content属性来指定内容的值。
::befor使用场景(比如在一个元素前面加一个图标)
<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<伪元素如下>
伪类与类优先级相同,伪元素与标签优先级相同。顺便说一下优先级怎么判断,一般是 !important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。还有一个简单的计算方法,内联样式表的权值为 1000,ID 选择器的权值为 100,Class 类选择器的权值为 10,HTML 标签选择器的权值为 1,权值实际并不是按十进制计算的,用数字表示只是说明思想,我们可以把选择器中规则对应做加法,比较权值大小,权值越大优先级越高,如果权值相同前面的样式会被后面的覆盖。
(学习视频分享:css视频教程)
以上就是css中::before是什么意思的详细内容,更多请关注自由互联其它相关文章!