一个很实用的css技巧简析

栏目: IT技术 · 发布时间: 5年前

内容简介：我是小雨小雨，专注于更新有趣、实用内容的小伙，如果内容对大家有一点帮助，那么就请动动手指，给个关注、点赞支持一下吧。 ^ - ^前两天接到一个需求，其中包括一个有序的列表，我们今天就来看看这个有序怎么做更方便、简单。当然，这个功能很简单：

我是小雨小雨，专注于更新有趣、实用内容的小伙，如果内容对大家有一点帮助，那么就请动动手指，给个关注、点赞支持一下吧。 ^ - ^

序言

前两天接到一个需求，其中包括一个有序的列表，我们今天就来看看这个有序怎么做更方便、简单。

当然，这个功能很简单：

可以手动写死...
可以循环插入dom，用索引做前缀。原生循环或者利用框架的循环
也可以用三行搓手手(css)自动计数

今天主要说说如何用css来计数

原理与介绍

原理很简单，利用伪元素的content + counter()/counters() + counter-reset + counter-increment计数四剑客即可，但是咱们需要先了解一下这几个属性是什么，才能得心应手！

content(): 用于向伪元素中插入元素
counter-reset: 设置命名计数器，可设置多个。格式为 (计数器名称初始值) (计数器名称初始值) ...
counter-increment: 用于增加某个计数器的值，可指定增加的具体值，可设置多个，格式同上。
counter系列(支持ie8以上)

可能看完死板的定义，还不能立马理解改如何做，所以这边画了个图：

一个很实用的css技巧简析

以码为兵，驰马试剑

咱们看两个示例，加深一波理解。

首先是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>父亲 <!-- 容器 -->
        <div>儿子</div>
        <div>儿子</div>
        <div>儿子</div>
        <div>儿子 <!-- 嵌套容器 -->
            <div>孙子</div>
            <div>孙子</div>
            <div>孙子</div>
        </div>
    </div>
</body>
</html>

一个很实用的css技巧简析

上面的例子是一个嵌套的带索引的列表，我们使用了两个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>容器
            <div>内容</div>
            <div>内容</div>
            <div>内容</div>
            <div>内容
                <div>容器
                    <div>内容</div>
                    <div>内容</div>
                    <div>内容</div>
                </div>
            </div>
        </div>
    </body>
</html>

一个很实用的css技巧简析

conters()的会搜索所有的容器，然后将命名计数器收集、拼接然后展示。

上面两个demo的区别可自行观察，如果有问题，欢迎评论区一起讨论交流.

结束是一个新的开始

这就是本次主题的全部内容，日后会坚持至少每周一更的频率，欢迎志同道合朋友一起讨论、交流。

最后，如果本文对你有帮助，希望得到你的支持。

一个很实用的css技巧简析

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Little Typer

Daniel P. Friedman、David Thrane Christiansen、Duane Bibby、Robert Harper、Conor Mcbride / MIT Press / 2018-10-16 / GBP 30.00

An introduction to dependent types, demonstrating the most beautiful aspects, one step at a time. A program's type describes its behavior. Dependent types are a first-class part of a language, and are......一起来看看《The Little Typer》这本书的介绍吧!

码农工具