From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/counter()/index.html | 145 +++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 files/zh-cn/web/css/counter()/index.html (limited to 'files/zh-cn/web/css/counter()') diff --git a/files/zh-cn/web/css/counter()/index.html b/files/zh-cn/web/css/counter()/index.html new file mode 100644 index 0000000000..d45b73b366 --- /dev/null +++ b/files/zh-cn/web/css/counter()/index.html @@ -0,0 +1,145 @@ +--- +title: counter() +slug: Web/CSS/counter() +tags: + - CSS + - CSS函数 + - CSS计数器 +translation_of: Web/CSS/counter() +--- +
{{CSSRef}}
+ +
CSS 函数 counter()，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。
+ +
/* 简单使用 */
+counter(计数器名称);
+
+/* 更改计数器显示 */
+counter(countername, upper-roman)
+ +

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

+ +
+

注释：counter()函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

+ +

在使用此功能之前，请仔细检查浏览器兼容性表。

+
+ +

语法

+ +

值

+ +
+
<custom-ident> 自定义标识
+
一个标识计数器的名称，区分大小写，并且与{{cssxref("counter-reset")}}和{{cssxref("counter-increment")}}中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
+
<counter-style> 计数器样式
+
计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
+
+ +

正式语法

+ +
counter( <custom-ident>, <counter-style>? )
+
+where
+<counter-style> = <counter-style-name> | symbols()
+
+where
+<counter-style-name> = <custom-ident>
+ +

示例

+ + +

default value compared to upper Roman

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}
+ +

结果

+ +

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+ +

decimal-leading-zero compared to lower-alpha

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}
+ +

结果

+ +

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
Specification状态注释
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.counter")}}

+ +

另请参阅

+ + -- cgit v1.2.3-54-g00ecf