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.

negative

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

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

Summary

When defining custom counter styles, the negative descriptor lets the author alter the representations of negative counter values, by providing a way to specify symbols to be appended or prepended to the counter representation when the value is negative. If the counter value is negative, the symbol provided as value for the descriptor will be prepended to the counter representation; and a second symbol if specified, will be appended to the representation. The negative descriptor has effect only if the system value is symbolic, alphabetic, numeric, additive, or extends, if the extended counter style itself uses a negative sign. If the negative descriptor is specified for other systems that don't support negative counter values, then the descriptor is ignored.

Related at-rule@counter-style
Initial value"-" hyphen-minus
Mediaall
Computed valueas specified
Canonical orderorder of appearance in the formal grammar of the values

Syntax

/* <symbol> values */
negative: "-";       /* Prepends '-' if value is negative */
negative: "(" ")";   /* Surrounds value by '(' and ')' if it is negative */

Values

First <symbol>
This symbol will be prepended to the representation when the counter is negative.
Second <symbol>
If present, this symbol will be appended to the representation when the counter is negative.

Formal syntax

<symbol> <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" start="-3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS Content

@counter-style neg {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    negative: "(-" ")";
}
.list {
    list-style: neg;
}

Result

Specifications

Specification Status Comment
CSS Counter Styles Level 3
The definition of 'system' 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, jsx, kscarfone
 最后编辑者: duncanmcdonald,