:before和::before的区别
共 1368字,需浏览 3分钟
·
2021-08-11 23:44
说明:今天遇到一个奇怪的css样式问题,使用vux的popup-picker组件h时.weui-cell样式中有一个before伪类,里面有一个border-top为1px的上边框,现在想去掉,:before来获取它会拿不到!!!修改不了,后来使用::before双冒号伪元素来处理!字数不够,废话来凑!!!
处理方法:
.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是直接在元素前面插入对应的内容!!!
扫码关注个人博客小程序