系统 | @counter-style.system

system描述符指定要用于计数器的整数值转换为字符串表示的算法。它用于@counter-style定义已定义样式的行为。

/* Keyword values */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* Combined values */
system: fixed 3;
system: extends decimal;

如果system描述符中指定的算法无法构造特定计数器值的表示，则将使用所提供的后备系统构造该值的表示。

Related at-rule	@counter-style
初始值	symbolic
适用媒体	all
计算值	as specified
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

这可采取以下三种形式之一：

• 其中一个关键字值cyclic，numeric，alphabetic，symbolic，additive，或fixed。

• 关键字值fixed和一个整数。

• 关键字值或extends一个@counter-style名字。

cyclic

通过提供的符号列表循环。一旦达到符号列表的末尾，它将循环回到开始并重新开始。这个系统对于只有一个符号的简单项目符号样式或者对于具有多个符号的样式是有用的。symbols描述符中必须至少指定一个符号，否则计数器样式无效。fixed定义了一组有限的符号被指定。一旦系统循环遍历所有指定的符号，它将回退。这个系统在计数器值是有限的情况下是有用的。symbols描述符中必须至少指定一个符号，否则计数器样式无效。也<integer>可以在系统之后指定一个可选项作为第一个符号的值。如果省略该整数，则取第一个整数的值1。symbolic循环通过提供的符号列表。在循环的每一个连续的过程中，用于计数器表示的符号被加倍，加倍，等等。例如，如果提供的原始符号是“◽”和“◾”，则在每个连续的通过中，它们将变成“◽◽”和“◾◾”，“◽◽◽”和“◾◾◾”等等。symbols描述符中必须至少指定一个符号，否则计数器样式无效。这个计数器系统只能用于正计数值。alphabetic将指定的符号解释为数字，转换为字母编号系统。如果字符"a"到"z"指定为在反风格的符号，与alphabetic系统，那么第一个26只计数器表示会"a"，"b"高达"z"。在此之前，行为与上述symbolic系统的行为相同。然而，后"z"，它将继续为"aa"，"ab"，"ac"。

symbols描述符必须包含至少两个符号或柜台风格是无效的。symbols描述符中提供的第一个计数器符号被解释为1下一个2，依此类推。这个系统也被严格定义为正计数值。numeric将计数器符号解释为位值编号系统中的数字。数字系统与上述alphabetic系统类似。主要区别是在alphabetic系统中，symbols描述符中给出的第一个计数器符号被解释为1下一个2，依此类推。但是，在数字系统中，第一个计数器符号被解释为0，下一个为1，然后2依此类推。

symbols描述符中必须至少指定两个计数器符号，否则计数器样式无效。additive用于表示“符号值”编号系统（如罗马数字），而不是重复使用不同位置的数字以获得不同的值，为更大的值定义附加数字。在这样的系统中的数字的值可以通过添加数字中的数字找出。

调用的附加描述符additive-symbols必须至少指定一个附加元组，否则计数器样式规则将无效。一个附加元组类似于一个复合计数器符号，它由两部分组成：一个正常的计数器符号和一个非负的整数权重。附加元组必须按照其权重的降序进行指定，否则系统无效。extends允许作者使用另一个计数器风格的算法，但改变其他方面。如果计数器样式规则使用extends系统，则将从指定的扩展计数器样式中获取任何未指定的描述符及其值。如果指定的计数器样式名称在扩展中，不是当前定义的计数器样式名称，而是从十进制计数器样式扩展。

它不能包含symbols或additive-symbols描述符，否则计数器样式规则无效。如果一个更多的计数器样式defenitions以其扩展值形成循环，则浏览器将把所有参与的计数器样式视为从十进制样式扩展。

正式语法

cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>? ] | [ extends <counter-style-name> ]where 
<counter-style-name> = <custom-ident>

示例

循环实例

@counter-style fisheye {
  system: cyclic;
  symbols: ◉;
  suffix: " ";
}

ul {
  list-style: fisheye;
}

如果浏览器支持它，上面的示例将如下列表：

◉ One

◉ Two

◉ Three

固定示例

@counter-style circled-digits {
  system: fixed;
  symbols: ➀ ➁ ➂;
  suffix: ' ';
}

ul {
  list-style: circled-digits;
}

如果浏览器支持它，上面的示例将如下列表：

➀ One

➁ Two

➂ Three

4 Four

5 Five

象征性的例子

@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

如果浏览器支持它，上面的示例将如下列表：

a. One

b. Two

c. Three

aa. Four

bb. Five

cc. Six

aaa. Seven

bbb. Eight

按字母顺序的例子

@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

如果浏览器支持它，上面的示例将如下列表：

a. One

b. Two

c. Three

aa. Four

ab. Five

ac. Six

ba. Seven

bb. Seven

数字示例

@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

如果浏览器支持它，上面的示例将如下列表：

b. One

c. Two

ba. Three

bb. Four

bc. Five

ca. Six

cb. Seven

cc. Eight

symbols描述符中提供的第一个符号这里解释为0。

如下面的示例所示，如果从0到9指定为符号，则此计数器样式将呈现与十进制计数器样式相同的符号。

例6

@counter-style numbers {
  system: numeric;
  symbols: 0 1 2 3 4 5 6 7 8 9;
  suffix: ": ";
}

ul {
  list-style: numbers;
}

如果浏览器支持它，上面的示例将如下列表：

1: 1

2：2

3：3

4：4

5：5

6：6

7：7

8：8

9：9

10：10

添加例子

这个例子使用罗马数字呈现一个列表。注意a range被指定。这是因为表示法只会产生正确的罗马数字，直到计数器的值3999。一旦超出范围，其余的反向表示将基于decimal风格，这是倒退。如果您需要将计数器值表示为罗马数字，则可以使用其中一种预定义的计数器样式，upper-roman或者lower-roman自己重新创建规则。

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

@counter-style upper-roman {
  system: additive;
  range: 1 3999;
  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
}

ul {
  list-style: upper-roman;
}

扩展示例

这个例子将使用lower-alpha计数器风格的算法，符号和其他属性，但是会去掉'.'计数器表示后的句号（），并将其中的字符括起来。像(a)，(b)等等。

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}

规范

Specification	Status	Comment
CSS Counter Styles Level 3The definition of 'system' in that specification.	Candidate Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	No support	33 (33)	No support	No support	No support

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	33 (33)	No support	No support	No support