一个很实用的css技巧简析

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

序言

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

当然，这个功能很简单：

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

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

原理与介绍

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

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

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技巧简析的更多相关文章

分享几个很实用的CSS技巧对前端技术很有帮助
创建剪切动画对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...
100个实用的CSS技巧，以及遇见的问题和解决方案。
前言本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个. 本案例都是经本人实测 ...
[C语言]一个很实用的服务端和客户端进行TCP通信的实例
本文给出一个很实用的服务端和客户端进行TCP通信的小例子.具体实现上非常简单,只是平时编写类似程序,具体步骤经常忘记,还要总是查,暂且将其记下来,方便以后参考. (1)客户端程序,编写一个文件clie ...
20个初学者实用的CSS技巧
过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...
20个很有用的CSS技巧
导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像这段代码会让你的 ...
翻了翻element-ui源码，发现一个很实用的指令clickoutside
前言指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...
Css学习总结（1）——20个很有用的CSS技巧
1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: graysca ...
一个简单实用的css loading图标
摘要在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http:// ...
[C语言]一个很实用的服务端和客户端进行UDP通信的实例
前段时间发了个TCP通信的例子,现在再来一个UDP通信的例子.这些可以作为样本程序,用到开发中.“裸写”socket老是记不住步骤,经常被鄙视…… 下面的例子很简单,写一个UDP的server用于收包 ...

随机推荐

[思路笔记]WEB安全之漏洞挖掘
记录自己在实际渗透测试以及漏洞挖掘中会用到的思路和方法.不断完善,尽量以系统的方式展现程序化式的漏洞挖掘.由于各种原因,不便公开. 通用策略 1.信息搜集 : 数据挖掘.业务挖掘数据: 邮箱.手机号 ...
c++ 语言几个坑
#include <iostream> int main(){ int i = 1; switch (i){ case 1 : int j ; j = 1; break; case 2: ...
android上线之前代码混淆加密
https://blog.csdn.net/zuiwuyuan/article/details/48552701# https://blog.csdn.net/chaoyu168/article/de ...
Redis哨兵模式高可用部署和配置
一.Redis 安装配置 1.下载redis安装包 wget http://download.redis.io/releases/redis-4.0.9.tar.gz 2.解压安装包 tar -zxv ...
P2448 无尽的生命(树状数组+离散化）
题目描述逝者如斯夫,不舍昼夜! 叶良辰认为,他的寿命是无限长的,而且每天都会进步. 叶良辰的生命的第一天,他有1点能力值.第二天,有2点.第n天,就有n点.也就是S[i]=i 但是调皮的小A使用时光 ...
java中==和equals
/** * @author zhaojiatao * @date 2018/7/19 */ public class equalsLearn { public static void main(Str ...
bzoj1076 奖励关(概率dp)(状态压缩)
BZOJ 1076 [SCOI2008]奖励关 Description 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须 ...
java 的CAS
CAS:什么是 CAS 机制?cas目的是实现原子操作解释一下:"原子操作(atomic operation)是不需要synchronized",这是多线程编程的老生常谈了.所谓原 ...
80）PHP，扩展工具类
啥是扩展工具类:这个问题很深奥,自己慢慢理解吧. 首先对于session的处理函数是扩展工具类. ②图片处理类 ③验证码生成类 ④算是项目中的一个功能模块. 扩展工具类放在我们的framew ...
Struts配置文件以Spring的方式实现自定义加载
在使用struts时,我们需要在web.xml中配置过滤器,同时我们需要配置struts的配置文件路径来加载项目中struts的相关配置信息.如果我们不配置路径的话,Struts会有一些默认的加载路径 ...