回退 | @counter-style.fallback
@counter-style.fallback
fallback描述符可以用来指定计数器样式回落到如果当前计数器风格不能为特定的计数器值创建一个标记表示。如果指定的回退风格也无法构造表示，则将使用其回退风格。如果没有指定有效的回退样式，则默认为decimal。使用回退样式的几种情况是：
- 当
range为计数器样式指定描述符时，将使用回退样式来表示超出范围的值。
- 如果
fixedsystem使用的是没有足够的符号来覆盖所有列表项目，则将使用后备样式作为其余列表项目。
| Related at-rule | @counter-style |
|---|---|
| 初始值 | decimal |
| 适用媒体 | all |
| 计算值 | as specified |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* Keyword values */
fallback: lower-alpha;
fallback: custom-gangnam-style;
正式语法
<counter-style-name>where
<counter-style-name> = <custom-ident>
示例
HTML
<ulclass="list"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li></ul>
CSS
@counter-style fallback-example {
system: fixed; symbols: "\24B6" "\24B7" "\24B8";
fallback: upper-alpha;
}
.list {
list-style: fallback-example;
}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Counter Styles Level 3The definition of 'fallback' 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 |
