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

随机推荐

webservice SOA
------------------认证问题
Different Gene Frequencies in the Two Sexes
I.7 Different Gene Frequencies in the Two Sexes 假设存在一种基因仅在第一代亲代的不同性别之间的概率有区别,比如,A 在male中频率是Pm,a是(1-P ...
Monkey通过安装包获取包名
在monkey命令中,包名常作为一个参数.但我们经常知道apk文件,却不知道包名. 如何获取包名呢? 方法一:AAPT 在SDK的build-tools目录下,aapt工具可以查看,创建,更新zip格 ...
vue项目环境搭建与组件介绍
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
[USACO09DEC]视频游戏的麻烦Video Game Troubles（DP）
https://www.luogu.org/problem/P2967 https://ac.nowcoder.com/acm/contest/1077/B 题目描述 Farmer John's co ...
[LC] 451. Sort Characters By Frequency
Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...
D. Almost All Divisors
We guessed some integer number xx. You are given a list of almost all its divisors. Almost all means ...
android studio 通过界面快速查看md5
https://www.jianshu.com/p/989c0be557f0
Metric space,open set
目录引入:绝对值度量空间 Example: 开集,闭集引入:绝对值 distance\(:|a-b|\) properties\(:(1)|x| \geq 0\),for all \(x \in ...
android基于MVP小说网络爬虫、宝贝社区APP、仿虎扑钉钉应用、滑动阴影效果等源码
Android精选源码 android宝贝社区app源码 android仿Tinder最漂亮的一个滑动效果 android仿滴滴打车开具发票页,ListView粘性Header Android基于MV ...