ホームページ > ウェブフロントエンド > CSSチュートリアル > 下位アルファのマーカーと右かっこを使用した HTML 順序付きリストを作成するにはどうすればよいですか?

下位アルファのマーカーと右かっこを使用した HTML 順序付きリストを作成するにはどうすればよいですか?

DDD
リリース: 2024-11-24 09:57:13
オリジナル
997 人が閲覧しました

How Can I Create an HTML Ordered List with Lower-Alpha Markers and Right Parentheses?

HTML の順序付きリスト: 右括弧付きの下位アルファ

「下位アルファ」の標準の順序付きリスト タイプでは、ピリオド " が使用されます。 。」リストマーカーとして。これを変更して代わりに右括弧を使用し、a)...b) などのシーケンスにする方法はありますか?

解決策

CSS が提供するものカウンタと呼ばれる機能により、章番号などのシーケンスを自動作成できます。この概念を適応させることで、右括弧を使用して目的の下位アルファ リストを実現できます。

コード スニペットは次のとおりです:

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}
ログイン後にコピー

「counter-reset」プロパティは、「」という名前のカウンターを初期化します。 list」は順序付きリストの場合です。 "リストスタイル: なし;"ネイティブ リスト シンボルを削除します。

重要なステップは、「li:before」セレクターです。各リスト項目の前にコンテンツを挿入します:

  • "counter(list, lower-alpha)" は下位アルファ文字 (a)、b) などを使用してカウントします。
  • 右括弧とスペースを追加すると、目的の形式が作成されます。 a)

結果のリストは次のように表示されます。以下:

`カスタム リスト スタイル タイプ (v1):


  1. 数値 1

  2. < ;li>番号 2
  3. 数字 3

  4. 数字 4

  5. 数字 5

  6. 数字6

`

以上が下位アルファのマーカーと右かっこを使用した HTML 順序付きリストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート