:before和::before的区别

Front小思

共 1368字,需浏览 3分钟

 · 2021-08-11

af19fdbf0cb6b13fc55a345b1bdaf805.webp


说明:今天遇到一个奇怪的css样式问题,使用vux的popup-picker组件h时.weui-cell样式中有一个before伪类,里面有一个border-top为1px的上边框,现在想去掉,:before来获取它会拿不到!!!修改不了,后来使用::before双冒号伪元素来处理!字数不够,废话来凑!!!


3cda1756d603081d845b13e75ba2d31e.webp


处理方法:

.weui-cell{    &::before{      border-top: 0px solid #D9D9D9 !important;    }  }


知识点解析:

::before 是一个伪类元素,代表生成的内容元素,表示相应元素的可抽象样式的第一个子元素,即:所选元素的第一个子元素 利用::before可以把需插入的内容插入到元素的其他内容之前,并且默认内联显示。::before需要使用content属性来指定内容的值。

区别:

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

那么现在就可以完整的回答标题中的问题了,对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的

所以,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。

CSS中,::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素

/* Add a heart before links */a::before {content: "♥";}

注意: 由::before 和::after 生成的伪元素 包含在元素格式框内, 因此不能应用在替换元素上, 比如<img><br> 元素。

/* CSS3 语法 */element::before { 样式 }
/* (单冒号)CSS2 过时语法 (仅用来支持 IE8) */element:before { 样式 }
/* 在每一个p元素前插入内容 */p::before { content: "Hello world!"; }

CSS3 引入 ::before  是为了将伪类伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。


反正一句话(我的理解):

::before创建新dom来承载内容,:before是直接在元素前面插入对应的内容!!!

扫码关注个人博客小程序

浏览 27
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报