添加符号 | @counter-style.additive-symbols (Counter Styles) - CSS 中文开发手册 - Break易站

  •   CSS 中文开发手册

    添加符号 | @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

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32099.html

    posted on   MrAit  阅读(232)  评论(0编辑  收藏  举报

    编辑推荐:
    · 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#中如何使用异步编程

    导航

    < 2025年1月 >
    29 30 31 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 1
    2 3 4 5 6 7 8
    点击右上角即可分享
    微信分享提示