negative
@counter-style at-rule 的 negative 描述符允許你定義在定義自定義計數器樣式時，負計數器值的表示方式。negative 描述符的值定義了當計數器值為負時，要新增到計數器表示之前和之後的符號。
語法
css
/* One <symbol> value */
negative: "--"; /* Adds '--' before if counter value is negative */
/* Two <symbol> values */
negative: "(" ")"; /* Adds '(- before and ')' after if counter value is negative */
值
negative 描述符接受最多兩個 <symbol> 值。
<symbol>-
如果只指定一個值，則當計數器為負時，它會被新增到計數器表示之前。如果指定兩個值，則第一個值會在計數器為負時新增到計數器表示之前，第二個值會新增到計數器表示之後。
描述
如果計數器值為負，則 negative 描述符指定的 <symbol> 會新增到計數器表示之前，替換負值預設的 -。第二個 <symbol>（如果指定）會新增到計數器表示之後。
negative 描述符在兩種情況下相關：如果計數器樣式具有 symbolic、alphabetic、numeric 和 additive 的 system 值且計數為負；以及如果 system 值為 extends 且擴充套件的計數器樣式本身使用負號。對於不支援負計數器值的系統，指定 negative 描述符沒有效果並會被忽略。
正式定義
| 相關的 at-rule | @counter-style |
|---|---|
| 初始值 | "-" 連字元-減號 |
| 計算值 | 同指定值 |
正式語法
negative =
<symbol> <symbol>?
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
渲染負計數器
此示例擴充套件了decimal列表樣式。negative描述符用於在負計數器值之前和之後新增(-和)。
HTML
html
<ol start="-3">
<li>Negative three</li>
<li>Negative two</li>
<li>Negative one</li>
<li>Zero</li>
<li>One</li>
</ol>
CSS
css
@counter-style neg {
system: extends decimal;
negative: "(-" ")";
suffix: ": ";
}
ol {
list-style: neg;
}
結果
規範
| 規範 |
|---|
| CSS Counter Styles Level 3 # counter-style-system |
瀏覽器相容性
載入中…
另見
@counter-style描述符：system、symbols、additive-symbols、prefix、suffix、range、pad、speak-as、fallback- 列表樣式屬性：
list-style、list-style-image、list-style-position symbols()函式用於建立匿名計數器樣式- CSS 計數器樣式模組
- CSS 列表和計數器模組