:before和::before的区别

说明：今天遇到一个奇怪的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是直接在元素前面插入对应的内容！！！

扫码关注个人博客小程序