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

序言

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

当然，这个功能很简单：

  • 可以手动写死...
  • 可以循环插入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. shell并行处理

    for i in (file1 file2 file3), do process_a $i | tee process_a $i_a.txt | process_b > $i_b.txt &am ...

  2. linux(centos 7)安装及使用yum

    yum介绍: Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的 ...

  3. 14 微服务电商【黑马乐优商城】：day02-springcloud(理论篇一：HttpClient的简单使用)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一: ...

  4. 新服务器搭建-总结: 下载nginx,jdk8,docker-compose编排(安装mysql,redis) 附安装

    三明SEO: 前言 如题, 公司新买了一条4核16G的服务器, 不得不重新搭建环境, 只能一一重来, 做个记录 1.nginx : 手动安装 2.jdk8: 手动安装 3. 安装docker 及doc ...

  5. vim删除所有

    vim test.log :0,$d :wq 注释: :0,$d是删除第0行到最后一行的意思::wq是保存并退出的意思. 执行上面的语句之后,文件中的内容就全部被删除掉了!

  6. nginx+tomcat配置集群

    安装nginx以及两个以上tomcat,并启动 配置集群nginx/conf/nginx.conf文件 说明:server_list为名字,可以在每台服务器ip后面添加weight number,设置 ...

  7. java中多线程入门有趣介绍

    我们在网上可以看到所有有关于java的线程的基本概念的很多解释,不乏有很多详细经典的解释和代码解说.但是我们的很多初学者看完不能有一个直观的印象,特别是一些没有编程基础的学习者,很多时候要花很多时间去 ...

  8. JS创建数组的三种方法

    1     常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...

  9. wireshark的过滤命令

    1.ip.addr == 192.168.1.1 这种是目标地址和源地址都是 后面指定的IP

  10. 01-信贷路由项目架构和 rose 框架的搭建

    1.信贷路由项目架构 2.工程搭建及测试 搭建tyrRouter-parent,tyrRouter-log-web,工程采用 maven 构建 配置 pom.xml 文件,父项目管理 jar 包的版本 ...