CSS @counter-style 規則

定義と使用方法

CSS @counter-style この規則はカスタムカウンタースタイルの定義に使用されます。

既定のスタイルが要件に合わない場合に、@counter-style この規則は、カスタムカウンタースタイルを定義することができます。

リストにカスタムカウンタースタイルを指定します:

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
{
ul {
  list-style: crown;
{

自分で試してみてください

CSS 语法

@counter-style  CSS 文法
  @counter-style
{

one or more descriptors

} 属性値

説明

countername

カウンタスタイルの大文字小文字を区別する名前を定義します。

注意:カウンタ名はnone、decimal、disc、square、circle、disclosure-openまたはdisclosure-closedではありません。

system

systemがcyclic、numeric、alphabetic、symbolicまたはfixedに設定されている場合、symbolsディスクリプタが必要です。

symbols

systemがadditiveに設定されている場合、additive-symbolsディスクリプタが必要です。

symbols

systemディスクリプタがcyclic、numeric、alphabetic、symbolicまたはfixedに設定されている場合、必須です。

HTML UTF-8 シンボル

additive-symbols

加法カウンターシステム(例えば、ローマ数字)は、一連の加重シンボルで構成されています。

重みが降順に並べられたカウンタシンボル及其非負整数ウェイトのリストがディスクリプタです。

systemディスクリプタがadditiveに設定されている場合、必須です。

negative 値が負数の場合にタグ表示に追加されるべき接頭辞または接尾辞を定義します。
prefix タグ表示に追加されるべき接頭辞を定義します。
suffix タグ表示に追加されるべき接尾辞を定義します。
range

カウンタスタイルの値範囲を定義します。

カウンタ値が範囲を超えた場合、サブスタイルにリトライします。

pad

タグが最小長さを持つ必要がある場合に使用します。

例えば、カウンタが01から始まり、02、03、04などと続くように希望する場合、パッドディスクリプタを使用します。

指定されたパッド値を超えるカウンタの場合、タグは通常構築されます。

speak-as

音声合成器がカウンタスタイルを読み出す方法を定義します。

例えば、順序付きリストの場合は数字またはアルファベットで読み、無秩序リストの場合はオーディオヒントで読みます。

fallback

システムがタグを構築できないまたは指定範囲を超えた場合のリトライのカウンタ名を定義します。

サブカウンターやサブシステムがカウンタ値を表現できない場合、デシマルスタイルにリトライします。

ブラウザのサポート

テーブルの数字は、@ルールを完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
91 91 33 17 77