首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

@counter-style.pad

pad当需要标记表示具有最小长度时,描述符可以用于自定义计数器样式定义。如果标记表示小于指定的填充长度,则标记将填充指定的填充符号。比标记长度更长的标记表示是正常的。填充描述符将最小标记长度作为整数,将用于填充的符号作为第二个参数。pad描述符的一个常见用法是当你需要你的列表从01开始编号,然后经过02,03等,而不是只有1,2,3。

Related at-rule

@counter-style

初始值

0 ""

适用媒体

all

计算值

as specified

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

代码语言:javascript
复制
pad: 3 "0";

<integer> && <symbol><integer>指定所有计数器表示必须达到的最小长度。该值必须是非负的。如果未达到最小长度,则将使用指定填充表示法<symbol>

正式语法

代码语言:javascript
复制
<integer> && <symbol>where 
<symbol> = <string> | <image> | <ident>
where 
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
where 
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

示例

HTML

代码语言:javascript
复制
<ul class="list">
? <li>One</li>
? <li>Two</li>
? <li>Three</li>
? <li>Four</li>
? <li>Five</li>
</ul>

CSS

代码语言:javascript
复制
@counter-style pad-example {
? system: numeric;
? symbols: "0" "1" "2" "3" "4" "5";
? pad: 2 "0";
}

.list {
? list-style: pad-example;
}

结果

规范

Specification

Status

Comment

CSS Counter Styles Level 3The definition of 'pad' 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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com