添加符号 | @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 (符号-值,指数字的值就是是符号加在一起的值)系统,比如 罗马数字。
1 2 3 | additive-symbols: 3 "0" ; additive-symbols: 3 "0" , 2 "E" ; additive-symbols: 3 "0" , 2 url (symbol.png); |
当系统描述符是循环,数字,拼音,象征,或固定的时候,使用symbols代替additive-symbols
Related at-rule | @counter-style |
---|---|
初始值 | N/A |
适用媒体 | all |
计算值 | as specified |
正规顺序 | order of appearance in the formal grammar of the values |
语法
正式语法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | [ <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 ( [ [ <percentage>{ 3 } | <number>{ 3 } ] [ / <alpha-value> ]? ] | [ [ <percentage>#{ 3 } | <number>#{ 3 } ] , <alpha-value>? ] ) <rgba()> = rgba( [ [ <percentage>{ 3 } | <number>{ 3 } ] [ / <alpha-value> ]? ] | [ [ <percentage>#{ 3 } | <number>#{ 3 } ] , <alpha-value>? ] ) <hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] ) <hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] ) <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 <alpha-value> = <number> | <percentage> <hue> = <number> | <angle> <color-stop> = <color> <length-percentage>? <length-percentage> = <length> | <percentage> |
示例
HTML
1 2 3 4 5 6 7 | <ul class= "list" > <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> |
CSS
1 2 3 4 5 6 7 | @counter-style additive-symbols-example { system: additive; additive-symbols: I 1 ; } .list { list-style : additive-symbols-example; } |
结果
规范
Specification | Status | Comment |
---|---|---|
CSS Counter Styles Level 3The definition of 'additive-symbols' in that specification. | Candidate Recommendation | Initial definition. |
浏览器兼容性
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 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
· C# 开发工具Visual Studio 介绍
· 在 Windows 10 上实现免密码 SSH 登录
· C#中如何使用异步编程