重拾CSS，前端样式精读-函数（其他函数）
前言
本文收录于CSS系列文章中，欢迎阅读指正
CSS函数相关文章已经接近尾声，前面的文章中，我介绍了颜色，计算，图像和图形，渐变，滤镜，变换这几大类的函数，剩下的函数自成一派被我归类到其他函数中，本文我将介绍一下这些函数的定义及使用。
counter()
在了解计数器函数之前，我们先认识一下counter-reset和counter-increment属性：counter-reset一般用于初始化计数器值，比如：
:root {
/* 初始化counter计数器，定义名称为count的计数器为10 */
counter-reset: count 10;
}counter-increment用于修改计数器的值，如：
.counter {
/* 每次出现类名为counter的标签时都会使名称为count的计数器递减一，第一个就会生效 */
counter-increment: count -1;
}接着来看看counter函数，它用于在内容插入当前计数器值。传参形如：counter(name, style)。name指定了计数器的名称，其实就是上述代码的count名称；style是可选的，类型是“>
，表示计数器的值的格式，例如：cjk-ideographic: 简体中文书写的表意数字；lower-roman: 小写罗马数字等。下面是一个简单的计数器的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS其他函数</title>
<style>
:root {
/* 初始化counter计数器，定义名称为count的计数器为10 */
counter-reset: count 10;
}
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightcoral;
margin: 10px;
}
.counter {
/* 每次出现类名为counter的标签时都会使名称为count的计数器递减一，第一个就会生效 */
counter-increment: count -1;
}
.counter::before {
content: "count: " counter(count, cjk-ideographic);
}
</style>
</head>
<body>
<div class="counter"></div>
<div class="counter"></div>
<div class="counter"></div>
</body>
</html>
counters()
counters函数用于生成嵌套计数器值的字符串表示。跟counter类似，但加上了分隔字符串，用于分隔嵌套计数表项。参数形式为：counters(name,string,style)，其中name是计数器名称，string是分隔嵌套计数器的字符，style是可选的计数方法。
下面的代码使用counters实现一个多级列表的效果
.counters {
counter-reset: ul-count;
}
ul::before {
counter-increment: ul-count;
counter-reset: counters;
content: "ul-count: " counter(ul-count, cjk-ideographic);
}
li::before {
counter-increment: counters;
margin-left: 10px;
content: "li-count: " counters(counters, "~");
}<section class="counters">
<ul>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
<ul>
<li></li>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li></li>
</ul>
</section>
attr()
用于检索元素属性的值，并在CSS中使用。例如：attr(attribute-name type)。attribute-name是要检索的属性名称，type是一个可选的定义属性值数据类型的参数，如px、em或其他CSS单位，由于第二个参数许多属性处于实验阶段，所以这里只展示第一个参数的用法
a:hover:after {
content: attr(tooltip);
padding: 5px;
background: lightcoral;
}<a href="#" tooltip="这是一个tooltip">attr函数展示</a>
cubic-bezier()
cubic-bezier用于定义CSS过渡和动画的时间函数。参数形如：cubic-bezier(p1x, p1y, p2x, p2y)。其中 p1x, p1y, p2x, p2y 是贝塞尔曲线的控制点，定义了动画或过渡的加速曲线。参数解析相关内容可以参照之前贝塞尔曲线相关的文章，本文只讲述其用法
cubic-bezier接收四个参数：p1x(第一个控制点的X坐标)，p1y(第一个控制点的Y坐标)，p2x(第二个控制点的X坐标)，p2y(第二个控制点的Y坐标)
通过transition-timing-function属性改变动画或缓动的时间线性关系，思考以下线性关系
我们使用cubic-bezier函数表示一下
.cubic-bezier {
transition: 1s;
transition-timing-function: cubic-bezier(0, 2, 1, -1);
}
.cubic-bezier:hover {
width: 300px;
}<div class="cubic-bezier">bezier函数</div>
steps()
创建一个分步的跳变效果，常用于动画。参数形式为：steps(int,start|end)。int是步数，start或end指定步进点是发生在间隔的开始还是结束。具体说明可以参考这篇文章中的transition-timing-function属性介绍。
.cubic-bezier:hover,
.steps:hover {
width: 300px;
}
.steps {
transition: 1s;
transition-timing-function: steps(3, end);
}<div class="steps">steps函数</div>
总结
本文延续了之前的CSS函数系列文章，使用剩余的函数对系列文章做了个收尾，后续增加的相关函数参照CSS 值函数 - CSS：层叠样式表 | MDN，希望本篇文章会对你有帮助。
最后，感谢你看到了这里，如果觉得本篇文章或者这个系列写的不错，还望三连支持一下，你的支持就是我创作的最大动力，谢谢！
相关代码
myCode: 基于js的一些小案例或者项目 - Gitee.com