IT教程 ·

一个很有用的css技能简析

40行代码手撸一个静态文档生成器[译]

我是细雨细雨,专注于更新风趣、有用内容的小伙,假如内容对人人有一点协助,那末就请动动手指,给个关注、点赞支撑一下吧。 ^ - ^

序文

前两天接到一个需求,个中包含一个有序的列表,我们本日就来看看这个有序怎么做更轻易、简朴。
固然,这个功用很简朴:

  • 能够手动写死...
  • 能够轮回插进去dom,用索引做前缀。原生轮回或许应用框架的轮回
  • 也能够用三行搓手手(css)自动计数

本日重要说说如何用css来计数

道理与引见

道理很简朴,应用伪元素的content + counter()/counters() + counter-reset + counter-increment计数四剑客即可,然则我们须要先相识一下这几个属性是什么,才随心所欲!

  1. content(): 用于向伪元素中插进去元素
  2. counter-reset: 设置定名计数器,可设置多个。花样为 (计数器称号 初始值) (计数器称号 初始值) ...
  3. counter-increment: 用于增添某个计数器的值,可指定增添的详细值,可设置多个,花样同上。
  4. counter系列(支撑ie8以上)

大概看完枯燥的定义,还不能立马明白改如何做,所以这边画了个图:

 

以码为兵,驰马试剑

我们看两个示例,加深一波明白。

首先是counter():
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            counter-reset: child-number; /* 看这 */
            box-sizing: border-box;
            border: 1px solid black;
            padding: 10px;
        }
        .child{
            counter-reset: grandson-number; /* 看这 */
            box-sizing: border-box;
            border: 1px solid blue;
            margin: 5px;
        }
        .child:before{
            content: counter(child-number); /* 看这 */
            counter-increment: child-number; /* 看这 */
        }
        .grandSon{
            box-sizing: border-box;
            border: 1px solid red;
            margin: 5px;
        }
        .grandSon:before{
            content: counter(grandson-number); /* 看这 */
            counter-increment: grandson-number; /* 看这 */
        }
    </style>
</head>
<body>
    <div class="parent">父亲 <!-- 容器 -->
        <div class="child">儿子</div>
        <div class="child">儿子</div>
        <div class="child">儿子</div>
        <div class="child">儿子 <!-- 嵌套容器 -->
            <div class="grandSon">孙子</div>
            <div class="grandSon">孙子</div>
            <div class="grandSon">孙子</div>
        </div>
    </div>
</body>
</html>

 

上面的例子是一个嵌套的带索引的列表,我们运用了两个counter-reset定义了两个容器,来示意嵌套,固然我们也能够运用counters()简化这个操纵。

再看看counters():
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .container {
                counter-reset: box-number; /* 看这 */
                box-sizing: border-box;
                border: 1px solid black;
                padding: 10px;
                margin: 5px;
            }
            .box:before {
                content: counters(box-number, '.'); /* 看这 */
                counter-increment: box-number; /* 看这 */
            }
            .box {
                box-sizing: border-box;
                border: 1px solid red;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div class="container">容器
            <div class="box">内容</div>
            <div class="box">内容</div>
            <div class="box">内容</div>
            <div class="box">内容
                <div class="container">容器
                    <div class="box">内容</div>
                    <div class="box">内容</div>
                    <div class="box">内容</div>
                </div>
            </div>
        </div>
    </body>
</html>

 

conters()的会搜刮一切的容器,然后将定名计数器网络、拼接然后展现。

上面两个demo的区分可自行视察,假如有问题,迎接批评区一同议论交换.

完毕是一个新的入手下手

这就是本次主题的全部内容,日后会对峙最少每周一更的频次,迎接同舟共济朋侪一同议论、交换。
末了,假如本文对你有协助,愿望获得你的支撑。

Redis(2)——跳跃表

参与评论