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

序言

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

当然，这个功能很简单：

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

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

原理与介绍

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

  1. content(): 用于向伪元素中插入元素
  2. counter-reset: 设置命名计数器，可设置多个。格式为 (计数器名称 初始值) (计数器名称 初始值) ...
  3. counter-increment: 用于增加某个计数器的值，可指定增加的具体值，可设置多个，格式同上。
  4. counter系列(支持ie8以上)
    描述 参数1 参数2 参数3
    counter() 返回命名计数器的当前值，一般与伪元素的 content()配合使用 定义的命名计数器 命名计数器的显示样式，例：阿拉伯数字1改成罗马数字Ⅰ 无
    counters() 升级版的counter()，支持嵌套 定义的命名计数器 命名计数器连接字符 命名计数器的显示样式，例：阿拉伯数字1改成罗马数字Ⅰ

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

以码为兵，驰马试剑

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

首先是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的区别可自行观察，如果有问题，欢迎评论区一起讨论交流.

结束是一个新的开始

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

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

一个很实用的css技巧简析的更多相关文章

  1. 分享几个很实用的CSS技巧对前端技术很有帮助

    创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...

  2. 100个实用的CSS技巧，以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

  3. [C语言]一个很实用的服务端和客户端进行TCP通信的实例

    本文给出一个很实用的服务端和客户端进行TCP通信的小例子.具体实现上非常简单,只是平时编写类似程序,具体步骤经常忘记,还要总是查,暂且将其记下来,方便以后参考. (1)客户端程序,编写一个文件clie ...

  4. 20个初学者实用的CSS技巧

    过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...

  5. 20个很有用的CSS技巧

    导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...

  6. 翻了翻element-ui源码，发现一个很实用的指令clickoutside

    前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...

  7. Css学习总结（1）——20个很有用的CSS技巧

    1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: graysca ...

  8. 一个简单实用的css loading图标

    摘要 在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http:// ...

  9. [C语言]一个很实用的服务端和客户端进行UDP通信的实例

    前段时间发了个TCP通信的例子,现在再来一个UDP通信的例子.这些可以作为样本程序,用到开发中.“裸写”socket老是记不住步骤,经常被鄙视…… 下面的例子很简单,写一个UDP的server用于收包 ...

随机推荐

  1. Android开发学习4

    学习内容: 1.RecyclerView 2.WebView

  2. mysql之存储过程（二）

    1.批量根据复杂的SQL查询结果插入到新表 DELIMITER && CREATE PROCEDURE settlePADTEST() begin        DECLARE c_s ...

  3. BinarySearchTree（二叉搜索树）原理及C++代码实现

    BST是一类用途极广的数据结构.它有如下性质:设x是二叉搜索树内的一个结点.如果y是x左子树中的一个结点,那么y.key<=x.key.如果y是x右子树中的一个结点,那么y.key>=x. ...

  4. redis簡單命令

  5. hdu1069 Monkey and Banana LIS

    #include<cstdio> #include<iostream> #include<algorithm> #include<queue> #inc ...

  6. Introduction to Differential Equations,Michael E.Taylor,Page 3,4 注记

    此文是对 [Introduction to Differential Equations,Michael E.Taylor] 第3页的一个注记.在该页中,作者给了微分方程$$\frac{dx}{dt} ...

  7. Linux SSH 允许root用户远程登录和无密码登录

    1. 允许root用户远程登录 修改ssh服务配置文件 sudo vi /etc/ssh/sshd_config调整PermitRootLogin参数值为yes,如下图: 2. 允许无密码登录同上,修 ...

  8. 量化预测质量之分类报告 sklearn.metrics.classification_report

    classification_report的调用为:classification_report(y_true, y_pred, labels=None, target_names=None, samp ...

  9. 利用git上传文件到github

    git add 文件名称/. "."代表全部 git commit -m -a git push -u origin master 推送到远程仓库 ---------------- ...

  10. resent|aspiration|deficiency|diagnosed|distract|emphasize

    VERB 怨恨;憎恶;愤恨If you resent someone or something, you feel bitter and angry about them. She resents h ...