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 列表和计数器模块