负数
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The negative
descriptor of the @counter-style
at-rule lets you define how negative counter values are represented when defining custom counter styles. The value of the negative
descriptor defines the symbols to be added before and after the counter representation when the counter's value is negative.
语法
/* One <symbol> value */
negative: "--"; /* Adds '--' before if counter value is negative */
/* Two <symbol> values */
negative: "(" ")"; /* Adds '(- before and ')' after if counter value is negative */
Values
The negative
descriptor accepts up to two <symbol>
values.
<symbol>
-
If only one value is specified, it is added before the counter representation when the counter is negative. If two values are specified, the first one is added before and the second one is added after the counter representation when the counter is negative.
描述
If the counter value is negative, the specified <symbol>
for the negative
descriptor is added before the counter representation, replacing the default -
for negative values. The second <symbol>
, if specified, is added after the counter representation.
The negative
descriptor is relevant in two cases: if counter styles have the system
value of symbolic
, alphabetic
, numeric
, and additive
and the count is negative; and if system
value is extends
and the extended counter style itself uses a negative sign. For systems that don't support negative counter values, specifying the negative
descriptor has no effect and is ignored.
正式定义
Related at-rule | @counter-style |
---|---|
Initial value | "-" hyphen-minus |
Computed value | as specified |
正式语法
negative =
<symbol> <symbol>?
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
示例
Rendering negative counters
此示例 扩展 了 decimal
列表样式。negative
描述符用于在负计数器值之前和之后添加 (-
和 )
。
HTML
<ol start="-3">
<li>Negative three</li>
<li>Negative two</li>
<li>Negative one</li>
<li>Zero</li>
<li>One</li>
</ol>
CSS
@counter-style neg {
system: extends decimal;
negative: "(-" ")";
suffix: ": ";
}
ol {
list-style: neg;
}
结果
当计数器值小于零时,才会在标记符中添加 negative
描述符值中列出的前缀和后缀。
规范
规范 |
---|
CSS 计数器样式级别 3 # counter-style-system |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参见
@counter-style
描述符:system
、symbols
、additive-symbols
、prefix
、suffix
、range
、pad
、speak-as
、fallback
- 列表样式属性:
list-style
、list-style-image
、list-style-position
symbols()
函数用于创建匿名计数器样式- CSS 计数器样式 模块
- CSS 列表和计数器 模块