OL定義有序列表的時候，除非指定list-style-position:inside;，否則文字和前置字元是有縮排的。
但有的時候，OL定義的清單類型有限制，比如不能定義漢字的“一、二、三”，我們只好手動來輸入這些字元，但這下文字和字元連在一起。
運行代碼框
<!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;}</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 style="list-style:none;"><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這個偽類來幫忙了：
運行代碼框
<!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就只處理了第一個字元。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
