添加符号 | @counter-style.additive-symbols (Counter Styles) - CSS 中文开发手册 - Break易站

添加符号 | @counter-style.additive-symbols (Counter Styles) - CSS 中文开发手册

additive-symbols描述符?定义符号，用于值可累积的可数的system的项 。?additive-symbols定义累积的的元组（tuples）,每个元组项都包含一个符号和一个非负整数的权重。additive system被用于构造sign-value numbering?（符号-值，指数字的值就是是符号加在一起的值）系统，比如 罗马数字。

additive-symbols: 3 "0";
additive-symbols: 3 "0", 2 "E";
additive-symbols: 3 "0", 2 url(symbol.png);

当系统描述符是循环，数字，拼音，象征，或固定的时候，使用symbols代替additive-symbols

语法

正式语法

[  &&  ]#where 
 =  |  | 
where 
 =  |  |  |  |  | 
where 
 = image( [ [  |  ]? , ? ]! )
 = image-set( # )
 = element(  )
 = cross-fade(  , ? )
 =  |  |  | 
where 
 =  |  |  |  |  |  | currentcolor |  = [  |  ]  = ? &&  =  |  = linear-gradient( [  | to  ]? ,  )
 = repeating-linear-gradient( [  | to  ]? ,  )
 = radial-gradient( [  ||  ]? [ at  ]? ,  )
 = repeating-radial-gradient( [  ||  ]? [ at  ]? ,  )
where 
 = rgb( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = rgba( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = hsl( [  [ /  ]? ] | [ , , , ? ] )
 = hsla( [  [ /  ]? ] | [ , , , ? ] )
 = [ left | right ] || [ top | bottom ]
 = #{2,}
 = circle | ellipse
 = closest-side | farthest-side | closest-corner | farthest-corner |  | {2}
 = [[ left | center | right | top | bottom |  ] | [ left | center | right |  ] [ top | center | bottom |  ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]]

where 
 =  |  =  | 
 = ?
 =  | 

示例

HTML

• One
• Two
• Three
• Four
• Five

CSS

@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}
.list {
  list-style: additive-symbols-example;
}

结果

规范

浏览器兼容性