@counter-style规则下additive-symbols属性实例页面

回到相关文章 »

效果：

凯德·坎宁安（活塞）
杰伦·格林（火箭）
埃文·莫布里（骑士）
斯科蒂·巴恩斯（猛龙）
杰伦·萨格斯（魔术）

fallback 示意

凯德·坎宁安（活塞）
杰伦·格林（火箭）
埃文·莫布里（骑士）
斯科蒂·巴恩斯（猛龙）
杰伦·萨格斯（魔术）

代码：

CSS代码：

@counter-style nba-draft {
    system: additive;
    additive-symbols: 探花 3, 榜眼 2, 状元 1;
    range: 1 3;
}
.draft {
    list-style-type: nba-draft;
}

@counter-style nba-draft2 {
    system: additive;
    additive-symbols: 探花 3, 榜眼 2, 状元 1;
    range: 1 3;
    fallback: cjk-decimal;
}
.draft-fallback {
    list-style: nba-draft2;
}

HTML代码：

<ul class="draft">
    <li>凯德·坎宁安（活塞）</li>
    <li>杰伦·格林（火箭）</li>
    <li>埃文·莫布里（骑士）</li>
    <li>斯科蒂·巴恩斯（猛龙）</li>
    <li>杰伦·萨格斯（魔术）</li>
</ul>

<ul class="draft-fallback">
    <li>凯德·坎宁安（活塞）</li>
    <li>杰伦·格林（火箭）</li>
    <li>埃文·莫布里（骑士）</li>
    <li>斯科蒂·巴恩斯（猛龙）</li>
    <li>杰伦·萨格斯（魔术）</li>
</ul>