prefix
@counter-style 規則的 prefix 描述符指定了將新增到計數器標記表示開頭的文字內容。
當計數器值為負時，prefix 會在負號和由 negative 描述符新增的任何其他 <symbol> 之前出現。
語法
css
/* <symbol> value: string, image, or identifier */
prefix: "»";
prefix: "Page ";
prefix: url("bullet.png");
值
prefix 描述符接受單個 <symbol> 作為其值。
<symbol>-
指定一個
<symbol>—— 一個<string>、<image>或<custom-ident>—— 它被新增到標記表示的開頭。
正式定義
| 相關的 at-rule | @counter-style |
|---|---|
| 初始值 | ""（空字串） |
| 計算值 | 同指定值 |
正式語法
prefix =
<symbol>
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
為計數器新增字首
在這個例子中，每個計數器數字都以“Book ”（帶一個空格）作為字首，並以冒號（:）作為字尾。冒號透過 suffix 描述符新增。
HTML
html
<ol class="books">
<li>Flamer, by Mike Curato</li>
<li>Gender Queer: A Memoir, by Maia Kobabe</li>
<li>Tricks, by Ellen Hopkins</li>
<li>The Handmaid's Tale: The Graphic Novel, by Margaret Atwood</li>
<li>Crank, by Ellen Hopkins</li>
</ol>
CSS
css
@counter-style books {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
prefix: "Book ";
suffix: ": ";
}
.books {
list-style: books;
padding-left: 15ch;
}
結果
規範
| 規範 |
|---|
| CSS Counter Styles Level 3 # counter-style-prefix |
瀏覽器相容性
載入中…
另見
- 其他
@counter-style描述符：system、symbols、additive-symbols、negative、suffix、range、pad、speak-as和fallback list-style、list-style-image、list-style-positionsymbols()：用於建立匿名計數器樣式的功能表示法- CSS 計數器樣式模組
- CSS 列表和計數器模組