一个很实用的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用于收包 ...

随机推荐

list交集、差集、并集、去重并集
// 交集 List<String> intersection = list1.stream().filter(item -> list2.contains(item)).colle ...
13）PHP，文件加载（include和require）
有四种文件加载的语法形式(注意,不是函数): include, include_once, require, require_once; 他们的本质是一样的,都是用于加载/引入/包含/载入一个外部 ...
C++ malloc()函数的注意点及使用示例
1.malloc()函数的头文件是stdlib.h,其函数声明如下: void* malloc(size_t size); 其中参数size_t size表示动态内存分配空间的大小,以字节为单位. s ...
[原]PInvoke导致栈破坏
原, 总结, 调试, 调试案例项目中遇到一个诡异的问题,程序在升级到.net4.6.1后会崩溃,提示访问只读内存区.大概现象如下: debug版不崩溃,release版稳定崩溃. 只有x64位的程 ...
用hash存数组|得地址|取地址
#!/usr/bin/perl -w use strict; my %hash = %{&collect};my $arr_ad=$hash{'a'};print "$arr_ad\ ...
CI_CD(jenkins)公司实战_未完成版
环境准备 #三台服务器,不同的ip centos 镜像时:CentOS Linux release 7.6.1810 (Core) gitlab-ce 版本是:11.11.3 jenkins ...
Sass入门指南
转自:http://www.imooc.com/article/1413 css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass.less.stylus.关于三者选择问题一 ...
day35-子进程的开启
#1.异步非阻塞: import os from multiprocessing import Process def func(): print('子进程:',os.getpid()) if __n ...
LGOJ3327 【SDOI2015】约数个数和
又是一道卡常好题坑掉我的 $define \space int \space long \space long$ 感觉出题人并没有获得什么快乐-- Description link 题意概述: ...
Resin介绍及其使用配置
Resin介绍及其使用配置一 Resin是一个提供高性能的,支持 Java/PHP 的应用服务器.目前有两个版本:一个是GPL下的开源版本,提供给一些爱好者.开发人员和低流量网站使用:一种是收费的专业 ...