zoukankan      html  css  js  c++  java
  • [TimLinux] CSS 计数功能实现递归目录

    内容引用自《css世界》:

    • count-reset 与 counter 为父子关系,兄弟关系会导致序号混乱
    • 调用一次 count-increment 将给序号进行一次报数,调用 counter 时将显示新的报数。
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    .reset { 
      padding-left: 20px; 
      counter-reset: wangxiaoer;
    }
    .counter:before { 
      content: counters(wangxiaoer, '-') '. '; 
      counter-increment: wangxiaoer;
    }
    </style>
    </head>
    <body>
    
    <div class="reset">
        <div class="counter">我是王小二
            <div class="reset">
                <div class="counter">我是王小二的大儿子</div>
                <div class="counter">我是王小二的二儿子
                    <div class="reset">
                        <div class="counter">我是王小二的二儿子的大孙子</div>
                        <div class="counter">我是王小二的二儿子的二孙子</div>
                        <div class="counter">我是王小二的二儿子的小孙子</div>
                    </div>
                </div>
                <div class="counter">我是王小二的三儿子</div>
            </div>
        </div>
        <div class="counter">我是王小三</div>
        <div class="counter">我是王小四
            <div class="reset">
                <div class="counter">我是王小四的大儿子</div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

  • 相关阅读:
    P3507 [POI2010]GRA-The Minima Game
    P2038 无线网络发射器选址
    2017.9.23清北第二场
    P3183 [HAOI2016]食物链
    2017.9.17校内noip模拟赛解题报告
    Day2代码
    P1328 生活大爆炸版石头剪刀布
    Fibinary Numbers
    Mac os 进行Android开发笔记(1)
    python中文注释及输出出错
  • 原文地址:https://www.cnblogs.com/timlinux/p/9606207.html
Copyright © 2011-2022 走看看