Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. CSS
  3. Reference
  4. At-rules
  5. @counter-style
  6. range

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

range

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Derrange Deskriptor ermöglicht es dem Autor, einen oder mehrere Bereiche von Zählerwerten anzugeben, für die der Stil angewendet wird, wenn benutzerdefinierte Zählerstile mit dem@counter-style At-Regel definiert werden. Wenn derrange Deskriptor enthalten ist, wird der definierte Zähler nur für Werte innerhalb der festgelegten Bereiche verwendet. Liegt der Zählerwert außerhalb des angegebenen Bereichs, wird der Fallback-Stil verwendet, um die Darstellung des Markers zu konstruieren.

Syntax

css
/* Keyword value */range: auto;/* Range values */range: 2 5;range: infinite 10;range: 6 infinite;range: infinite infinite;/* Multiple range values */range:  2 5,  8 10;range:  infinite 6,  10 infinite;

Werte

Der Wert ist eine durch Kommas getrennte Liste von Bereichen, die jeweils ein unteres und ein oberes Limit oder das Schlüsselwortauto enthalten.

auto

Die gesamte Menge der durch den Zähler darstellbaren Zahlensystem. Diese Bereichswerte hängen vom Zählsystem ab:

  • Fürcyclic,numeric undfixed Systeme reicht der Bereich von negativerUnendlichkeit bis positiverUnendlichkeit.
  • Füralphabetic undsymbolic Systeme reicht der Bereich von1 bis positiveUnendlichkeit.
  • Füradditive Systeme reicht der Bereich von0 bis positiveUnendlichkeit.
  • Bei der Verwendung vonextend, um ein System zu erweitern, ist der Bereich das, wasauto für das erweiterte System erzeugen würde, einschließlich Erweiterungen komplexer vordefinierter Stile, wie einige japanische, koreanische, chinesische und äthiopische Zählerstile.
[ [ <integer> | infinite ]{2} ]#

Jeder Bereich in der durch Kommas getrennten Liste von Bereichen umfasst zwei Werte, die entweder ein<integer> oder das Schlüsselwortinfinite sind. Wenninfinite als erster Wert in einem Bereich verwendet wird, steht es für negative Unendlichkeit; wenn es als zweiter Wert verwendet wird, steht es für positive Unendlichkeit. Der erste Wert jedes Bereichs ist die untere Grenze für den Bereich und der zweite Wert ist die obere Grenze, inklusive. Wenn die untere Grenze eines Bereichs in der Liste höher ist als die obere Grenze, ist der gesamterange Deskriptor ungültig und wird ignoriert.

Beschreibung

Der Wert desrange Deskriptors kann entwederauto oder eine durch Kommas getrennte Liste von unteren und oberen Grenzbereichen sein, die mit negativen oder positiven Ganzzahlen oder dem Schlüsselwortinfinite angegeben werden.

Verständnis vonauto

Wenn der Wert aufauto eingestellt ist, ist der Bereich der Standardbereich für das Zählsystem. Ist dassystemcyclic,numeric oderfixed, reicht der Bereich von negativer Unendlichkeit bis positiver Unendlichkeit. Ist dassystemalphabetic odersymbolic, reicht der Bereich von1 bis positiveUnendlichkeit. Fürsystem: additive ergibtauto den Bereich von0 bis positiveUnendlichkeit.

Wenn ein Zähler erweitert wird, wird bei eingestelltemrange: auto der Bereichswert der Bereich dessystem des erweiterten Zählers, nicht derrange Wert, falls vorhanden, dieses Zählers. Wenn zum Beispiel der Zähler "B" dassystem: extends A hat, wobei der Zähler einalphabetic Zähler ist, setztrange: auto auf "B" den Bereich von "B" von1 bisUnendlichkeit. Dies ist der Bereich desalphabetic Systems, nicht unbedingt der Bereich, der in der "A" Zählerstildefinition festgelegt ist. Mitrange: auto auf "B" wird derrange auf den Standardbereich desalphabetic Systems gesetzt, nicht auf denrange Wert, der in der Deskriptorliste des Zählers A festgelegt wurde.

Erklärung voninfinite

Wenn der Bereich als Ganzzahlen angegeben wird (im Gegensatz zuauto), kann der Wertinfinite verwendet werden, um Unendlichkeit darzustellen. Wenninfinite als erster Wert in einem Bereich angegeben wird, wird es als negative Unendlichkeit interpretiert. Wenn es als obere Grenze verwendet wird, also als zweiter Wert im Bereichspaar, wird es als positive Unendlichkeit betrachtet.

Liste der Bereiche

Der Wert vonrange ist entwederauto, wie oben besprochen, oder eine durch Kommas getrennte Liste von einem oder mehreren Bereichen. Der Bereich des Zählerstils ist die Vereinigung aller in der Liste definierten Bereiche.

Jeder Bereich in der Bereichsliste nimmt zwei Werte an. Diese Werte sind entweder ein<integer> oder das Schlüsselwortinfinite. Der erste Wert ist dieuntere Grenze, inklusive. Der zweite Wert ist dieobere Grenze, inklusive. Bei zwei Ganzzahlenwerten muss der niedrigere Wert zuerst kommen. Wenn die untere Grenze eines Bereichs in der Liste höher ist als die obere Grenze, ist der gesamterange Deskriptor ungültig und wird ignoriert. Das Schlüsselwortinfinite macht den Bereich nicht ungültig, da die Position voninfinite seinen Wert bestimmt; entweder negative oder positive Unendlichkeit, abhängig davon, ob es die untere oder obere Grenze ist.

Formale Definition

Zugehörige@-Regel@counter-style
Anfangswertauto
Berechneter Wertwie angegeben

Formale Syntax

range =
[[<integer>|infinite]{2}]#|
auto

<integer> =
<number-token>

Beispiele

Zählerstil über einen Bereich einstellen

HTML

html
<ul>  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li>  <li>Five</li>  <li>Six</li>  <li>Seven</li>  <li>Eight</li>  <li>Nine</li>  <li>Ten</li></ul>

CSS

css
@counter-style range-multi-example {  system: cyclic;  symbols: "\25A0" "\25A1";  range:    2 4,    7 9;}.list {  list-style: range-multi-example;}

Ergebnis

Der erste Bereich in der Liste der Bereiche umfasst 2, 3 und 4. Der zweite umfasst 7, 8 und 9. Der Bereich ist die Vereinigung dieser beiden Bereiche, also 2, 3, 4, 7, 8 und 9.

Spezifikationen

Specification
CSS Counter Styles Level 3
# counter-style-range

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

[8]ページ先頭

©2009-2026 Movatter.jp