initial commit

1 files changed, 145 insertions, 0 deletions

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()
+---
+<div>{{CSSRef}}</div>
+
+<div><a href="/en-US/docs/Web/CSS">CSS</a> 函数 <code><strong>counter</strong></code><strong><code>()</code></strong>，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持&lt;string&gt;值的任何地方使用。</div>
+
+<pre class="brush: css notranslate">/* 简单使用 */
+counter(计数器名称);
+
+/* 更改计数器显示 */
+counter(countername, upper-roman)</pre>
+
+<p>一个<a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">计数器</a>本身没有可见的效果，而是通过<code>counter()</code>函数（和<code><a href="/en-US/docs/Web/CSS/counters">counters()</a></code>函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。</p>
+
+<div class="blockIndicator note">
+<p><strong>注释：</strong><code>counter()</code>函数可以与任何CSS属性一起使用，但是对<code><a href="/en-US/docs/Web/CSS/content">"content"</a></code>以外的属性的支持是试验性的，对type-or-unit参数的支持很少。</p>
+
+<p>在使用此功能之前，请仔细检查<a href="#Browser_compatibility">浏览器兼容性表</a>。</p>
+</div>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>语法</strong></span></font></p>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code><a href="/zh-CN/docs/Web/CSS/custom-ident">&lt;custom-ident&gt;</a> 自定义标识</code></dt>
+ <dd>一个标识计数器的名称，区分大小写，并且与{{cssxref("counter-reset")}}和{{cssxref("counter-increment")}}中的“名称”相同。名称不能以两个破折号开头，并且不能为<code>none</code>, <code>unset</code>, <code>initial</code>, 或 <code>inherit</code>。</dd>
+ <dt><code style="white-space: nowrap;">&lt;counter-style&gt; 计数器样式</code></dt>
+ <dd>计数器样式名称或 <code><a href="/en-US/docs/Web/CSS/symbols">symbols()</a></code> 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他<a href="/en-US/docs/Web/CSS/CSS_Counter_Styles">预定义计数器样式</a>。如果省略，则计数器样式默认为十进制。</dd>
+</dl>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre class="syntaxbox notranslate">counter( <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/custom-ident" title="The &lt;custom-ident> CSS data type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity.">&lt;custom-ident&gt;</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/counter#counter-style">&lt;counter-style&gt;</a><a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Question_mark_()" title="Question mark: the entity is optional">?</a> )
+
+where
+<code>&lt;counter-style&gt; = <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/counter#counter-style-name">&lt;counter-style-name&gt;</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> symbols()</code>
+
+where
+<code>&lt;counter-style-name&gt; = <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/custom-ident" title="The &lt;custom-ident> CSS data type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity.">&lt;custom-ident&gt;</a></code></pre>
+
+<p><strong>示例</strong></p>
+
+
+<h3 id="default_value_compared_to_upper_Roman">default value compared to upper Roman</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}</pre>
+
+<h4 id="结果">结果</h4>
+
+<p>{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}</p>
+
+<h3 id="decimal-leading-zero_compared_to_lower-alpha"><dfn>decimal-leading-zero</dfn> compared to lower-alpha</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  content: "[" counter(count, <dfn>decimal-leading-zero</dfn>) "] == ["
+               counter(count, lower-alpha) "]";
+}</pre>
+
+<h4 id="结果_2">结果</h4>
+
+<p>{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.types.counter")}}</p>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>另请参阅</strong></span></font></p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">使用CSS计数器</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>CSS <code><a href="/en-US/docs/Web/CSS/counters">counters()</a></code> 函数</li>
+</ul>