:before和::before的區(qū)別

說明：今天遇到一個(gè)奇怪的css樣式問題，使用vux的popup-picker組件h時(shí).weui-cell樣式中有一個(gè)before偽類，里面有一個(gè)border-top為1px的上邊框，現(xiàn)在想去掉，：before來獲取它會拿不到！！！修改不了，后來使用：：before雙冒號偽元素來處理！字?jǐn)?shù)不夠，廢話來湊！！！

處理方法：

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

知識點(diǎn)解析：

::before 是一個(gè)偽類元素，代表生成的內(nèi)容元素，表示相應(yīng)元素的可抽象樣式的第一個(gè)子元素，即：所選元素的第一個(gè)子元素 利用::before可以把需插入的內(nèi)容插入到元素的其他內(nèi)容之前，并且默認(rèn)內(nèi)聯(lián)顯示。::before需要使用content屬性來指定內(nèi)容的值。

區(qū)別：

單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。偽元素和偽類之所以這么容易混淆，是因?yàn)樗麄兊男Ч愃贫覍懛ㄏ喾拢珜?shí)際上?css3?為了區(qū)分兩者，已經(jīng)明確規(guī)定了偽類用一個(gè)冒號來表示，而偽元素則用兩個(gè)冒號來表示。但因?yàn)榧嫒菪缘膯栴}，所以現(xiàn)在大部分還是統(tǒng)一的單冒號，但是拋開兼容性的問題，我們在書寫時(shí)應(yīng)該盡可能養(yǎng)成好習(xí)慣，區(qū)分兩者。

雙冒號是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時(shí)支持舊的已經(jīng)存 在的偽元素寫法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。

那么現(xiàn)在就可以完整的回答標(biāo)題中的問題了，對于CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的。

所以，如果你的網(wǎng)站只需要兼容webkit、firefox、opera等瀏覽器，建議對于偽元素采用雙冒號的寫法，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號寫法比較安全。

CSS中，::before?創(chuàng)建一個(gè)偽元素，其將成為匹配選中的元素的第一個(gè)子元素。常通過?content?屬性來為一個(gè)元素添加修飾性的內(nèi)容。此元素默認(rèn)為行內(nèi)元素

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

注意:?由::before?和::after?生成的偽元素?包含在元素格式框內(nèi)，?因此不能應(yīng)用在替換元素上，?比如<img>或<br>?元素。

/* CSS3 語法 */element::before { 樣式 }
/* （單冒號）CSS2 過時(shí)語法 (僅用來支持 IE8) */element:before  { 樣式 }
/* 在每一個(gè)p元素前插入內(nèi)容 */p::before { content: "Hello world!"; }

CSS3 引入?::before? 是為了將偽類和偽元素區(qū)別開來。瀏覽器也接受由CSS 2 引入的?:before?寫法。

反正一句話（我的理解）：

::before創(chuàng)建新dom來承載內(nèi)容，:before是直接在元素前面插入對應(yīng)的內(nèi)容！！！

掃碼關(guān)注個(gè)人博客小程序