range | CSS

在此页

句法
描述
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

When defining custom counter styles, the range descriptor lets the author specify a range of counter values over which the style is applied. If a counter value is outside the specified range, then the fallback style will be used to construct the representation of that marker.

句法

/* Keyword value */
range: auto;
/* Range values */
range: 2 5;
range: infinite 10;
range: 6 infinite;
range: infinite infinite;
/* Multiple range values */
range: 2 5, 8 10;
range: infinite 6, 10 infinite;

值

auto

The range depends on the counter system:

For cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity.
For alphabetic and symbolic systems, the range is 1 to positive infinity.
For additive systems, the range is 0 to positive infinity.
For extends systems, the range is whatever auto would produce for the extended system; if extending a complex predefined style (§7 Complex Predefined Counter Styles), the range is the style’s defined range.

[ [ | infinite ]{2} ]#

Defines a comma-separated list of ranges. For each individual range, the first value is the lower bound and the second value is the upper bound. A range is inclusive, that means it always contains both, the lower and upper bound numbers. If infinite is used as the first value in a range, it represents negative infinity; if it is used as the second value, it represents positive infinity. The range of the counter style is the union of all the ranges defined in the list.
If the lower bound of any range is higher than the upper bound, the entire descriptor is invalid and will be ignored.

描述

The value of the range descriptor can be either auto or a comma separated list of lower and upper bounds specified as integers.

If value is auto, then for cyclic, numeric, and fixed system, the range will be from negative infinity to positive infinity. For alphabetic and symbolic systems, range will be from 1 to positive infinity. For additive systems, auto will result in the range 0 to positive infinity. For extends systems, the range is whatever auto will produce for the extended system.

When range is specified as integers, the value infinite can be used to denote infinity. If infinite is specified as the first value in a range, then it is interpreted as negative infinity. If used as upper bound, it is taken as positive infinity.

形式定义

相关 at-rule	`@counter-style`
初始值	`auto`
计算值	如指定

形式句法

[ [ <integer> | infinite ]{2} ]# | auto

范例

Setting counter style over a range

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0" "\25A1";
  range: 2 4, 7 9;
}
.list {
  list-style: range-multi-example;
}

The above list will display as follows:

1. One
□. Two
■. Three
□. Four
5. Five
6. Six
■. Seven
□. Eight
■. Nine
10. Ten

规范

规范	状态	注释
CSS Counter Styles Level 3 The definition of 'range' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`range`	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 33	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 33	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持

另请参阅

list-style , list-style-image , list-style-position
symbols() , the functional notation creating anonymous counter styles.

元数据

最后修改： Jul 21, 2020

在此页

句法

值

描述

形式定义

形式句法

范例

Setting counter style over a range

规范

浏览器兼容性

图例

另请参阅

相关话题