css 控制first-letter偽類的背景

2024-07-11 08:26:43

字體：大中小

供稿：網(wǎng)友

但有的時候，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>最初被稱為盒模型酸試驗，是一個用于測試瀏覽器的網(wǎng)頁。它在1998年10月開發(fā)，成為了衡量早期瀏覽器兼容性的重要準(zhǔn)線，特別是瀏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速并直觀的衡量一塊金屬的質(zhì)量好壞，網(wǎng)頁酸試驗的目標(biāo)是提供一個可以清楚地表明瀏覽器的是否遵守 Web 標(biāo)準(zhǔn)的方法。</li> <li>該版本針對支持HTML、CSS 2.0及PNG圖像[1]標(biāo)準(zhǔn)的綜合測試，由網(wǎng)頁標(biāo)準(zhǔn)計劃小組（Web Standards Project）設(shè)計。</li> <li>于 2008年3月3日正式發(fā)布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以瀏覽器打開此測試網(wǎng)頁后，頁面會不斷加載功能[4]并根據(jù)測試情況給予分?jǐn)?shù)，滿分為100分</li> </ol> <hr /> <ol class="list"> <li>一、最初被稱為盒模型酸試驗，是一個用于測試瀏覽器的網(wǎng)頁。它在1998年10月開發(fā)，成為了衡量早期瀏覽器兼容性的重要準(zhǔn)線，特別是瀏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速并直觀的衡量一塊金屬的質(zhì)量好壞，網(wǎng)頁酸試驗的目標(biāo)是提供一個可以清楚地表明瀏覽器的是否遵守 Web 標(biāo)準(zhǔn)的方法。</li> <li>二、該版本針對支持HTML、CSS 2.0及PNG圖像[1]標(biāo)準(zhǔn)的綜合測試，由網(wǎng)頁標(biāo)準(zhǔn)計劃小組（Web Standards Project）設(shè)計。</li> <li>三、2008年3月3日正式發(fā)布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以瀏覽器打開此測試網(wǎng)頁后，頁面會不斷加載功能[4]并根據(jù)測試情況給予分?jǐn)?shù)，滿分為100分</li> </ol> <hr /> <ol class="list"> <li>壹、最初被稱為盒模型酸試驗，是一個用于測試瀏覽器的網(wǎng)頁。它在1998年10月開發(fā)，成為了衡量早期瀏覽器兼容性的重要準(zhǔn)線，特別是瀏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速并直觀的衡量一塊金屬的質(zhì)量好壞，網(wǎng)頁酸試驗的目標(biāo)是提供一個可以清楚地表明瀏覽器的是否遵守 Web 標(biāo)準(zhǔn)的方法。</li> <li>貳、該版本針對支持HTML、CSS 2.0及PNG圖像[1]標(biāo)準(zhǔn)的綜合測試，由網(wǎng)頁標(biāo)準(zhǔn)計劃小組（Web Standards Project）設(shè)計。</li> <li>叁、2008年3月3日正式發(fā)布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以瀏覽器打開此測試網(wǎng)頁后，頁面會不斷加載功能[4]并根據(jù)測試情況給予分?jǐn)?shù)，滿分為100分</li> </ol> </body> </html>

上一篇：請保留超鏈接的outline屬性

下一篇：WEB標(biāo)準(zhǔn)之CSS 打造自己的reset.css

發(fā)表評論

共有條評論