以前對於CSS僞元素的應用並很少,最近在用一款建站系統爲客戶作企業門戶網站時,發現網頁HTML代碼中常常出現::before和::after。後經查資料才瞭解,這都是CSS的爲元素。CSS 僞元素用於向某些選擇器設置特殊效果。因此本文將和你們一塊兒分享交流CSS的僞元素的使用知識。css
所謂的僞元素,顧名思義他們並非真正的HTML元素。::before與::after用於向目標元素裏內容的前面或後面添加內容。也許你已經注意到了,爲何before與after的前面一會單個冒號,一會又兩個冒號,有什麼區別麼?其實也沒什麼區別,只是CSS3中爲了區別他們在HTML代碼與CSS代碼裏的表現形式,將html中的僞元素顯示爲雙冒號。在書寫CSS代碼時,若是不考慮過舊的瀏覽器兼容問題,不管是用單冒號仍是雙冒號,結果都是同樣的。html
這裏要強調注意的是,這裏所說的「前」與「後」,是指目標元素裏面的內容的先後,而不是目標元素的先後。因此說,僞元素是目標元素的子元素。瀏覽器
咱們來看個示例:學習
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css" media="screen"> 6 div:before{ 7 display:table; 8 content:"在段落前面添加內容"; 9 } 10 a:after{ 11 display:table; 12 content:attr(href); 13 } 14 </style> 15 </head> 16 <body> 17 <div> 18 <p>這裏是段落文本</p> 19 <a href="http://www.chanzhi.org">個人官網</a> 20 </div> 21 </body> 22 </html>
content是僞元素必不可少的一個屬性。用於設置要添加的內容。這個內容能夠是字符文本也能夠是目標元素自身的某屬性值。好比在上例中,a標籤內容後添加了href屬性值,即連接地址。顯示效果以下:網站
僞元素的做用固然不會僅限於此,實際應用中,咱們能夠經過僞元素添加各類界面顯示特效。這裏咱們舉一個常見的清除浮動的例子。以前咱們不少朋友清除浮動的方法是底部添加一個空div,採用clear:both;的樣式。代碼以下:ui
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css" media="screen"> 6 div.con_left,div.con_right{ 7 float:left; 8 } 9 .clear{ 10 clear:both; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="con_left"></div> 16 <div class="con_right"></div> 17 <div class="clear"></div> 18 </body> 19 </html>
如今經過僞元素,咱們能夠作的更簡便,不須要添加空元素。spa
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css" media="screen"> 6 div.con_left,div.con_right{ 7 float:left; 8 } 9 .content{ 10 display:table; 11 content:""; 12 width:0px; 13 clear:both; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="content"> 19 <div class="con_left"></div> 20 <div class="con_right"></div> 21 </div> 22 </body> 23 </html>
經過:before與:after僞元素,咱們能夠在CSS中設計出更多的樣式特效。本文咱們一塊兒分享交流了僞元素的使用,若是你們在平時實際應用過程當中有更好的案例,歡迎和你們一塊兒分享交流。咱們共同窗習,共同交流,共同進步。設計