Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

additive-symbols

这篇文章需要技术复核。如何帮忙。

我们的志愿者还没有将这篇文章翻译为 中文 (简体)加入我们帮助完成翻译!

Summary

The additive-symbols descriptor is similar to the symbols descriptor and allows the user to specify symbols to be used for counter representations when the value of the system descriptor is additive. The additive-symbols descriptor defines what are known as additive tuples, each of which is a pair containing a symbol and a non-negative integer weight. The additive system is used to construct sign-value numbering systems such as the Roman numerals.

When the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed, the symbols descriptor is used instead of additive-symbols to specify counter symbols.

Related at-rule@counter-style
Initial valueN/A
Mediaall
Computed valueas specified
Canonical orderorder of appearance in the formal grammar of the values

Syntax

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

Formal syntax

[ <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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<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
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

Example

HTML Content

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

CSS Content

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

Result

Specifications

Specification Status Comment
CSS Counter Styles Level 3
The definition of 'additive-symbols' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

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

See also

文档标签和贡献者

 此页面的贡献者: duncanmcdonald, Sebastianz, kscarfone, jsx
 最后编辑者: duncanmcdonald,