css Counters

原文: http://www.w3cplus.com/css3/css-counters.html © w3cplus.com

counter-reset:此值是必需的。必须用于选择器,主要用来标识该作用域,其值可以自定义。
counter-increment:用来标识计数器与实际相关联的范围。
content:用来生成内容,其为:before、:after或::before、::after的一个属性。在生成计数器内容,主要配合counter()一起使用。
counter():该函数用来设置插入计数器的值。
:before:after::before::after:配合content用来生成计数器内容。

mdn的例子:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>counters()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
ol {
    margin: 0;
    padding: 0 0 0 2em;
    list-style: none;
    counter-reset: item;
}
li:before {
    counter-increment: item;
    content: counters(item, ".");
    color: #f00;
}
</style>
</head>
<body>
<ol class="test">
    <li>Node
        <ol>
            <li>Node
                <ol>
                    <li>Node</li>
                    <li>Node</li>
                    <li>Node</li>
                </ol>
            </li>
            <li>Node</li>
        </ol>
    </li>
    <li>Node</li>
    <li>Node</li>
</ol>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 引入样式: @media print{} 单位****(cm,in****英寸****)1 inch = 2.54...
    神刀阅读 2,101评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,627评论 32 459
  • 烟鬼的自白 我就爱抽烟, 一抽十几年, 提起那滋味, 飘飘欲仙。点燃细细的烟, 燃烧在纤细的指间, 淡定从容, 显...
    阿超Lilian阅读 155评论 0 0
  • 我一直都知道。你一无所知。 它的存在或消亡。似已无足轻重。 雨下得很大,我没有再走。站在屋檐下看着雨势渐渐变小,才...
    轻念韶华阅读 302评论 0 1