控制first-letter偽類的背景

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 控制first-letter偽類的背景

控制first-letter偽類的背景

編輯：CSS進階教程

OL定義有序列表的時候，除非指定list-style-position:inside;，否則文字和前導符是有縮進的。

但有的時候，OL定義的列表類型有限制，比如不能定義漢字的“一、二、三”，我們只好手動來輸入這些字符，但這下文字和字符連在一起。

這個時候就可以使用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=utf-8" /> <title>first-letter</title> <style type="text/css"> body{font-size:12px;width:600px;margin:2em auto;} ol.list { list-style:none; } ol.list li:first-letter { margin-left:-2em;color:blue;font-weight:bold;} </style> </head> <body> <ol> <li>最初被稱為盒模型酸試驗，是一個用於測試浏覽器的網頁。它在1998年10月開發，成為了衡量早期浏覽器兼容性的重要准線，特別是浏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速並直觀的衡量一塊金屬的質量好壞，網頁酸試驗的目標是提供一個可以清楚地表明浏覽器的是否遵守 Web 標准的方法。</li> <li>該版本針對支持HTML、CSS 2.0及PNG圖像[1]標准的綜合測試，由網頁標准計劃小組（Web Standards Project）設計。</li> <li>於 2008年3月3日正式發布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以浏覽器打開此測試網頁後，頁面會不斷加載功能[4]並根據測試情況給予分數，滿分為100分</li> </ol> <hr /> <ol class="list"> <li>一、最初被稱為盒模型酸試驗，是一個用於測試浏覽器的網頁。它在1998年10月開發，成為了衡量早期浏覽器兼容性的重要准線，特別是浏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速並直觀的衡量一塊金屬的質量好壞，網頁酸試驗的目標是提供一個可以清楚地表明浏覽器的是否遵守 Web 標准的方法。</li> <li>二、該版本針對支持HTML、CSS 2.0及PNG圖像[1]標准的綜合測試，由網頁標准計劃小組（Web Standards Project）設計。</li> <li>三、2008年3月3日正式發布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以浏覽器打開此測試網頁後，頁面會不斷加載功能[4]並根據測試情況給予分數，滿分為100分</li> </ol> <hr /> <ol class="list"> <li>壹、最初被稱為盒模型酸試驗，是一個用於測試浏覽器的網頁。它在1998年10月開發，成為了衡量早期浏覽器兼容性的重要准線，特別是浏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速並直觀的衡量一塊金屬的質量好壞，網頁酸試驗的目標是提供一個可以清楚地表明浏覽器的是否遵守 Web 標准的方法。</li> <li>貳、該版本針對支持HTML、CSS 2.0及PNG圖像[1]標准的綜合測試，由網頁標准計劃小組（Web Standards Project）設計。</li> <li>三、2008年3月3日正式發布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以浏覽器打開此測試網頁後，頁面會不斷加載功能[4]並根據測試情況給予分數，滿分為100分</li> </ol> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行] 渲染結果：

這下，前導符就和文字保持一定距離了，而且能控制的樣式也更多一點。
不過前導符後面那個頓號就控制不到樣式了，但我想可不可以設置背景圖來取代呢？
簡單測試卻發現，控制first-letter偽類的背景，與控制list-style-image一樣讓人琢磨不透，遂棄之。

另外，各個浏覽器對待前導符旁邊的符號處理方式也不一樣，因為沒有安裝Safari，所以沒有測試它：

代碼：

IE8和FF3和Opera表現一致，Chrome只對左側的符號進行處理，IE6、7就只處理了第一個字符。

上一頁:CSS技巧教程:讓CSS代碼更具有易維護性
下一頁:在Mozilla UI中優化CSS文件的規則

CSS進階教程

如何用css控制input中的text和radio: 在制作表單頁面的時候，如果頁面有很多表單，我就不願意單獨定義一個input樣式然後每個input
實現透視效果用css來實現: 網頁制作poluoluo文章簡介：今天萌發一個想法，用css來實現透視效果。起初，我想到的是我們常見
網頁文件上傳表單的制作: 我們平時在日常網絡生活當中，上傳則是一個非常重要的功能。尤其是對於那麼依靠網友分享的站點來說，上傳是

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章