CSS中的偽類after是怎樣的

這篇文章將為大家詳細(xì)講解有關(guān)CSS中的偽類after是怎樣的，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

1. 引子

前段時(shí)間學(xué)習(xí) web 布局的時(shí)候，因?yàn)橐酶?dòng) float 屬性，所以就順理成章地碰到了清除浮動(dòng) clear 屬性。教學(xué)的案例中是用新建一個(gè)空的 div 標(biāo)簽的方式來清除浮動(dòng)的，主要代碼如下：

CSS 

1. <div class="mainBox">   
       <div class="leftBox"></div>   
       <div class="rightBox"></div>   
       <div class="clear"></div>   
   </div>   
     
   .mainBox   
   {   
       width:960px;   
       margin:0 auto;   
       background-color:#CFF;   
       overflow:visible;   
   }   
   .leftBox   
   {   
       width:740px;   
       height:300px;   
       background-color:#C9F;   
       float:left;   
   }   
   .rightBox   
   {   
       width:210px;   
       height:300px;   
       background-color:#FCF;   
       float:rightright;   
   }   
   .clear  
   {   
       clear:both;   
       height:0;/*解決IE6下有高度的問題*/  
       overflow:hidden;   
   }

看到之后，想到以前見到過有用 css 偽類 after 來進(jìn)行清除浮動(dòng)的方式。記不太清了，于是寫成了如下的情況：

CSS 

1. <div class="mainBox">   
       <div class="leftBox"></div>   
       <div class="rightBox"></div>   
   </div>   
     
   .mainBox{   
       width:960px;   
       background-color:#CFF;   
       margin:0 auto;   
       }   
   .leftBox{   
       width:740px;   
       height:300px;   
       background-color:#C9F;   
       float:left;   
   }   
   .rightBox{   
       width:210px;   
       height:300px;   
       background-color:#FCF;   
       float:rightright;   
   }   
   .rightBox:after{   
       clear:both;   
       content:".";   
       visibility:hidden;   
       display:block;   
       height:0;   
       overflow:hidden;   
   }

悲劇發(fā)生了，mainBox 中的 #CFF 顏色并沒有出現(xiàn)在 leftBox 和 rightBox 中間，說明上述的寫法有地方不對(duì)了。詢問了偉大的谷歌之后才發(fā)現(xiàn)，css 的 after 偽類應(yīng)該寫在 mainBox 之后，即：

CSS 

1. .mainBox:after{   
       clear:both;   
       content:".";   
       visibility:hidden;   
       display:block;   
       height:0;   
       overflow:hidden;   
   }

    P.S.
    1. 現(xiàn)在回過頭來看上述方法，其實(shí)上述方法所謂的清除浮動(dòng)，都是將沒有設(shè)置高度的.mainBox的高度撐起來，從而使得.mainBox的弟元素能直接跟在.mainBox后面。而不會(huì)因?yàn)?mainBox高度塌陷而被隱藏在.mainBox內(nèi)部浮動(dòng)的子元素下。防止高度塌陷還可以使用創(chuàng)建一個(gè) BFC 的方法（如overflow:hidden）來進(jìn)行。
    2. 如果.mainBox設(shè)置了高度，且大于或等于其浮動(dòng)的子元素，那么不用這樣的清除浮動(dòng)的方式，.mainBox的弟元素也不會(huì)受到.mainBox內(nèi)部浮動(dòng)子元素的影響。
    3. 若果不考慮.mainBox的高度塌陷問題，直接在其弟元素處設(shè)置clear屬性即可。

2. 關(guān)于 after 的思考

w3school 中關(guān)于 after 偽類的介紹如下：

    定義和用法
    :after 選擇器在被選元素的內(nèi)容后面插入內(nèi)容。
    請(qǐng)使用 content 屬性來指定要插入的內(nèi)容。

比較有歧義的是這個(gè)“被選元素的內(nèi)容后面”中的 后面 兩個(gè)字。開始我誤認(rèn)為了是將 after 中的內(nèi)容插入至被選元素的 弟元素 位置上。

CSS 

1. .rightBox:after{   

2.     content:"我是after";   

3.     display:block  

4. }  

會(huì)產(chǎn)生類似于

CSS 

1. <div class="rightBox"></div>   

2. <div>我是after</div>  

這樣的效果 （當(dāng)然，after 偽類實(shí)際上是不會(huì)產(chǎn)生一個(gè) DOM 元素的）。

但通過引子中用 css 偽類 after 來進(jìn)行清除浮動(dòng)的檢驗(yàn)，發(fā)現(xiàn) 后面 實(shí)際上應(yīng)該理解為將 after 中的內(nèi)容插入至被選元素的 子元素 位置上，即類似于如下效果：

CSS 

1. <div class="rightBox">   

2.     <div>我是after</div>   

3. </div>  

因此，才有了引子中用 mainBox:after{} 這樣的方式來實(shí)現(xiàn) after 偽類清除浮動(dòng)，而非 rightBox:after{}這種方式。

簡單總結(jié)下：after 偽類所產(chǎn)生的內(nèi)容應(yīng)該是在被選元素的子元素位置(而且在所有子元素的最后，簡單的幾個(gè)測試就能發(fā)現(xiàn)，不再贅述)，而非被選元素的弟元素位置。
3. w3school 中的示例

從這個(gè) 示例 可以看出，after 偽類內(nèi)容的默認(rèn) display 方式應(yīng)該為內(nèi)聯(lián) inline。

其實(shí)看到這個(gè)示例才發(fā)現(xiàn)，after 偽類所產(chǎn)生的內(nèi)容應(yīng)該就是在被選元素的子元素位置的（汗，那還饒了那么大個(gè)圈才發(fā)現(xiàn)&hellip;&hellip;）。示例中 p 標(biāo)簽的 after 內(nèi)容展現(xiàn)的方式已經(jīng)很明確了，大家可以仔細(xì)體會(huì)下。所以說，看示例也是很重要啊。

關(guān)于CSS中的偽類after是怎樣的就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。