CSS

@counter-style.pad

@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

语法

pad: 3 "0";

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

正式语法

<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

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

CSS

@counter-style pad-example {   system: numeric;   symbols: "0" "1" "2" "3" "4" "5";   pad: 2 "0"; } .list {   list-style: pad-example; }

结果

规范

SpecificationStatusComment
CSS Counter Styles Level 3The definition of 'pad' in that specification.Candidate RecommendationInitial definition

浏览器兼容性

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic supportNo support33 (33)No supportNo supportNo support

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic supportNo support33 (33)No supportNo supportNo support