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 ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最初の文字</title>
<style type="text/css">
body{font-size:12px;width:600px;margin:2em auto;}
</スタイル>
</head>
<本文>
<オル>
<li>元々は Box Model Acid Test として知られていた、ブラウザのテストに使用される Web ページです。 1998 年 10 月に開発され、初期のブラウザとの互換性、特にブラウザによる Cascading Style Sheets 1.0 のサポートの重要なベンチマークになりました。酸性テストを使用して金属片の品質を迅速かつ視覚的に測定するのと同じように、Web 酸性テストの目的は、ブラウザが Web 標準に準拠しているかどうかを明確に示す方法を提供することです。 </li>
<li>このバージョンは、HTML、CSS 2.0、および PNG 画像[1] 標準のサポートを包括的にテストするために、Web Standards Project によって設計されました。 </li>
<li>2008 年 3 月 3 日に正式にリリースされ、テストの焦点は ECMAScript、DOM レベル 3、メディア クエリ、およびデータ (URL[3]) にあります。このテスト Web ページをブラウザで開くと、ページは関数 [4] を継続的にロードし、テスト状況に基づいて 100 点満点のスコアを与えます。</li>
</ol>
<hr />
<ol style="list-style:none;">
<li>1. 元々はボックス モデル Acid テストとして知られ、ブラウザーのテストに使用される Web ページです。 1998 年 10 月に開発され、初期のブラウザとの互換性、特にブラウザによる Cascading Style Sheets 1.0 のサポートの重要なベンチマークになりました。酸性テストを使用して金属片の品質を迅速かつ視覚的に測定するのと同じように、Web 酸性テストの目的は、ブラウザが Web 標準に準拠しているかどうかを明確に示す方法を提供することです。 </li>
<li>2. このバージョンは、HTML、CSS 2.0、および PNG 画像 [1] 標準をサポートする包括的なテストのために Web Standards Project によって設計されました。 </li>
<li>3. 2008 年 3 月 3 日に正式にリリースされ、テストの焦点は ECMAScript、DOM レベル 3、メディア クエリ、およびデータです: URL[3]。このテスト Web ページをブラウザで開くと、ページは関数 [4] を継続的にロードし、テスト状況に基づいて 100 点満点のスコアを与えます。</li>
</ol>
</body>
</html>
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
現時点では、最初の文字の疑似クラスを使用すると、次のことが可能になります。
コードボックスを実行
<!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 ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最初の文字</title>
<style type="text/css">
body{font-size:12px;width:600px;margin:2em auto;}
ol.list {リストスタイル:なし}
ol.list li:first-letter { margin-left:-2em;color:blue;font-weight:bold;}
</スタイル>
</head>
<本文>
<オル>
<li>元々は Box Model Acid Test として知られていた、ブラウザのテストに使用される Web ページです。 1998 年 10 月に開発され、初期のブラウザとの互換性、特にブラウザによる Cascading Style Sheets 1.0 のサポートの重要なベンチマークになりました。酸性テストを使用して金属片の品質を迅速かつ視覚的に測定するのと同じように、Web 酸性テストの目的は、ブラウザが Web 標準に準拠しているかどうかを明確に示す方法を提供することです。 </li>
<li>このバージョンは、HTML、CSS 2.0、および PNG 画像[1] 標準のサポートを包括的にテストするために、Web Standards Project によって設計されました。 </li>
<li>2008 年 3 月 3 日に正式にリリースされ、テストの焦点は ECMAScript、DOM レベル 3、メディア クエリ、およびデータ (URL[3]) にあります。このテスト Web ページをブラウザで開くと、ページは関数 [4] を継続的にロードし、テスト状況に基づいて 100 点満点のスコアを与えます。</li>
</ol>
<hr />
<ol class="リスト">
<li>1. 元々はボックス モデル Acid テストとして知られ、ブラウザーのテストに使用される Web ページです。 1998 年 10 月に開発され、初期のブラウザとの互換性、特にブラウザによる Cascading Style Sheets 1.0 のサポートの重要なベンチマークになりました。酸性テストを使用して金属片の品質を迅速かつ視覚的に測定するのと同じように、Web 酸性テストの目的は、ブラウザが Web 標準に準拠しているかどうかを明確に示す方法を提供することです。 </li>
<li>2. このバージョンは、HTML、CSS 2.0、および PNG 画像 [1] 標準をサポートする包括的なテストのために Web Standards Project によって設計されました。 </li>
<li>3. 2008 年 3 月 3 日に正式にリリースされ、テストの焦点は ECMAScript、DOM レベル 3、メディア クエリ、およびデータです: URL[3]。このテスト Web ページをブラウザで開くと、ページは関数 [4] を継続的にロードし、テスト状況に基づいて 100 点満点のスコアを与えます。</li>
</ol>
<hr />
<ol class="リスト">
<li>1. 元々はボックス モデル Acid テストとして知られ、ブラウザーのテストに使用される Web ページです。 1998 年 10 月に開発され、初期のブラウザとの互換性、特にブラウザによる Cascading Style Sheets 1.0 のサポートの重要なベンチマークになりました。酸性テストを使用して金属片の品質を迅速かつ視覚的に測定するのと同じように、Web 酸性テストの目的は、ブラウザが Web 標準に準拠しているかどうかを明確に示す方法を提供することです。 </li>
<li>2. このバージョンは、HTML、CSS 2.0、および PNG 画像 [1] 標準をサポートする包括的なテストのために Web Standards Project によって設計されました。 </li>
<li>3. 2008 年 3 月 3 日に正式にリリースされ、テストの焦点は ECMAScript、DOM レベル 3、メディア クエリ、およびデータです: URL[3]。このテスト Web ページをブラウザで開くと、ページは関数 [4] を継続的にロードし、テスト状況に基づいて 100 点満点のスコアを与えます。</li>
</ol>
</body>
</html>
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
今回は、主役がテキストから一定の距離を保ち、より多くのスタイルを制御できるようになりました。
ただし、先頭文字の後のコンマのスタイルは制御できませんが、背景画像を設定して置き換えることはできるでしょうか。
簡単なテストでは、最初の文字の疑似クラスの背景を制御することは、リスト スタイル イメージを制御するのと同じくらい混乱することが判明したため、放棄されました。
また、先頭文字の横にある記号の扱いはブラウザごとに異なります。Safari がインストールされていないため、テストしませんでした。
コード：
.png)
レンダリング結果:
.jpg)
IE8、FF3、Opera は同様に動作します。Chrome は左側の記号のみを処理しますが、IE6 と 7 は最初の文字のみを処理します。