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

序言

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

当然,这个功能很简单:

  • 可以手动写死...
  • 可以循环插入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. jest 测试入门(一)

    说实话,作为前端来说,单元测试,并不是一种必须的技能,但是确实一种可以让你加法的技能 之前我一个库添加了单元测试,加完之后感悟颇深,所以写下这篇文章来记录 环境搭建 一般来说,普通的库,如果没有添加 ...

  2. 34)static 静态成员和静态成员函数

    1) static修饰的方法,只能在这个文件中使用,比如你是多文件编程,别的文件即使引入了我的 .h文件  但那时我的static方法也是不能用 2)C++的static的成员变量   比如  sta ...

  3. linux c 调用 python

    /* *gcc -o callpy callpy.cpp -I/usr/include/python3.5 -lpython3.5m */ #include <Python.h> #inc ...

  4. 2017NOIP模拟赛三 A酱的体育课

    据说改编自$CodeM 美团点评编程大赛初赛A 轮$ 简单的水题...考试的时候没想到,xjb打了暴力. 显然,第$x$个人排在第$y$个位置的情况总数为$(n-1)!$,在这些情况中,第$x$人对答 ...

  5. Solving ordinary differential equations I(nonstiff problems),exercise 1.1

    Solve equation $y'=1-3x+y+x^2+xy$ with another initial value $y(0)=1$. Solve: We solve this by using ...

  6. $.proxy和$.extend

    $.proxy用法详解 参考:https://www.cnblogs.com/alice626/p/6004864.html jQuery中的$.proxy官方描述为: 描述:接受一个函数,然后返回一 ...

  7. A component required a bean named xxx that could not be found. Action: Consider defining

    0 环境 系统:win10 1 正文 https://stackoverflow.com/questions/44474367/field-in-com-xxx-required-a-bean-of- ...

  8. 3)Framework创建思路

  9. asp.net 获取日期

    //获取日期+时间 DateTime.Now.ToString(); // 2008-9-4 20:02:10 DateTime.Now.ToLocalTime().ToString(); // 20 ...

  10. Springmvc+Mybatis+shiro整合

    Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网络 ...