CSS基礎學習十：偽元素 · Web前端HTML+CSS+JS初級入門

上一篇博客說的是偽類，這次我們來說說偽元素。先來補充一下上篇博客漏掉的一個偽類：:focus 偽類 (1)定義和用法 :focus偽類在元素獲得焦點時向元素添加特殊的樣式。注釋IE瀏覽器不支持此屬性。 (2)說明這個偽類應用于有焦點的元素。例如HTML中一個有文本輸入焦點的輸入框，其中出現了文本輸入光標；也就是說，在用戶開始鍵入時，文本會輸入到這個輸入框。其他元素（如超鏈接）也可以有焦點，不過CSS沒有定義哪些元素可以有焦點。 ~~~ a:link {color: #FF0000} /* 未訪問的鏈接 */ a:focus {color: #00FF00} /* 獲得焦點的鏈接 */ ~~~ 再來一個結合其他選擇器的例子： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> a.red:visited {color: #FF0000;} </style> </head> <body> <a class="red" href="http://www.baidu.com">百度一下，你就知道</a> </body> </html> ~~~ 如果上面這個例子中的鏈接已被訪問過，那么它會顯示為紅色。那么運行的結果為也是這樣子的。 (3)實例:規定獲得焦點的輸入字段的顏色的完整代碼為： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> input:focus { background-color:yellow; } </style> </head> <body> <form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> </form> <p><b>注釋：</b>如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 偽類。</p> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_5721559698422.jpg) 瀏覽器支持所有主流瀏覽器都支持 :focus 偽類。注釋：如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 偽類。下面我們來說偽元素 CSS偽元素用于向某些選擇器設置特殊效果。語法偽元素的語法(和偽類是一樣的)： selector:pseudo-element {property:value;} CSS 類也可以與偽元素配合使用： selector.class:pseudo-element {property:value;} (1):first-line 偽元素 ":first-line" 偽元素用于向文本的首行設置特殊樣式。在下面的例子中，瀏覽器會根據 "first-line" 偽元素中的樣式對 p 元素的第一行文本進行格式化： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> p:first-line { color: #ff0000; font-size:18px; } </style> </head> <body> <p>出師未捷身先死，<br/>長使英雄淚滿襟。</p> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215596a9cf5.jpg) 注釋："first-line" 偽元素只能用于塊級元素。注釋：下面的屬性可應用于 "first-line" 偽元素： font color background word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear (2):first-letter 偽元素 ":first-letter" 偽元素用于向文本的首字母設置特殊樣式：來看一個實例： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> p:first-letter { color: #ff0000; font-size:18px; } </style> </head> <body> <p>出師未捷身先死，<br/>長使英雄淚滿襟。</p> <hr/> <p>兩情若是久長時，又豈在朝朝暮暮</p> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215596bc8c9.jpg) 注釋："first-letter" 偽元素只能用于塊級元素。注釋：下面的屬性可應用于 "first-letter" 偽元素： font color background margin padding border text-decoration vertical-align (僅當 float 為 none 時) text-transform line-height float clear (3)偽元素和CSS類偽元素可以與CSS類配合使用： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> p.article:first-letter { color: #FF0000; } </style> </head> <body> <p class="one">出師未捷身先死，<br/>長使英雄淚滿襟。</p> <hr/> <p class="article">兩情若是久長時，又豈在朝朝暮暮</p> </body> </html> ~~~ 上面的例子會使所有 class 為 article 的段落的首字母變為紅色。運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215596cb5ba.jpg) (4)多重偽元素可以結合多個偽元素來使用。在下面的例子中，段落的第一個字母將顯示為紅色，其字體大小為 xx-large。第一行中的其余文本將為藍色，并以小型大寫字母顯示。段落中的其余文本將以默認字體大小和顏色來顯示： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } </style> </head> <body> <p class="one">出師未捷身先死，<br/>長使英雄淚滿襟。</p> <hr/> <p class="article">兩情若是久長時，又豈在朝朝暮暮</p> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215596e0cd2.jpg) :before 偽元素 ":before" 偽元素可以在元素的內容前面插入新內容。下面的例子在每個 <p> 元素前面插入一幅圖片： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> p:before { content:url(01.jpg); } </style> </head> <body> <p class="one">出師未捷身先死，<br/>長使英雄淚滿襟。</p> <hr/> <p class="article">兩情若是久長時，又豈在朝朝暮暮</p> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215596f2687.jpg) :after 偽元素 ":after" 偽元素可以在元素的內容之后插入新內容。下面的例子在每個 <p> 元素后面插入一幅圖片： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> p:after { content:url(01.jpg); } </style> </head> <body> <p class="one">出師未捷身先死，<br/>長使英雄淚滿襟。</p> <hr/> <p class="article">兩情若是久長時，又豈在朝朝暮暮</p> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_572155970fcaa.jpg)