counters()
CSS
function
enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. The
counters()
function has two forms:
counters(
name
,
string
)
or
counters(
name
,
string
,
style
)
. It is generally used with
pseudo-elements
, but can be used, theoretically, anywhere a
<string>
value is supported. The generated text is the value of all counters with the given name, from outermost to innermost, separated by the specified string. The counters are rendered in the style indicated, defaulting to
decimal
if no style is specified.
/* Simple usage - style defaults to decimal */ counters(countername, '-'); /* changing the counter display */ counters(countername, '.', upper-roman)
A
counter
has no visible effect by itself. The
counters()
function (and
counter()
function) is what makes it useful by returning developer defined content.
注意：
counters()
function can be used with any CSS property, but support for properties other than
content
is experimental, and support for the type-or-unit parameter is sparse.
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。
<custom-ident>
counter-reset
and
counter-increment
. The name cannot start with two dashes and can't be
none
,
unset
,
initial
，或
inherit
.
<counter-style>
symbols()
function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other
predefined counter style
. If omitted, the counter-style defaults to decimal
<string>
\000A9
represents the copyright symbol.
counters( <custom-ident>, <string>, <counter-style>? )where
<counter-style> = <counter-style-name> | symbols()where
<counter-style-name> = <custom-ident>
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::marker {
content: counters(listCounter, '.', upper-roman) ') ';
}
li::before {
content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
}
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::marker {
content: counters(count, '.', upper-alpha) ') ';
}
li::before {
content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Lists Module Level 3
The definition of 'CSS Counters' in that specification. |
工作草案 | No change |
|
CSS Level 2 (Revision 1)
The definition of 'CSS Counters' in that specification. |
推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
counters()
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1.5 | IE 完整支持 8 | Opera 完整支持 10 | Safari 完整支持 3 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
counter-set
counter-reset
counter-increment
@counter-style
counter()
function
::marker