共计 4068 个字符,预计需要花费 11 分钟才能阅读完成。
在网页设计中,以有组织的形式示意数据十分重要,这样用户能够轻松地理解网站或内容的构造。最简略的办法是应用有序列表。
如果你须要对数字的外观进行更多的管制,你可能会认为你须要通过 HTML 或 JavaScript 在 DOM 中增加更多的元素,并对其进行款式化。侥幸的是,CSS 计数器为你省去了很多麻烦。
在本教程中,咱们将演示如何开始应用 CSS 计数器并介绍一些用例。
相干浏览:应用 CSS ::marker 的自定义我的项目符号
有序列表的问题
当编写如下所示的有序列表时,浏览器会主动显示数字。
<ol>
<li>My First Item</li>
<li>My Second Item</li>
<li>My Third Item</li>
</ol>
这很好,但它不容许你对数字进行款式化。例如,假如你须要把数字放在一个圆圈内。你会怎么做呢?
一种办法是齐全解脱列表,而后本人手动增加数字。
<div>
<span>1</span> My First Item
</div>
<div>
<span>2</span> My Second Item
</div>
<div>
<span>3</span> My Third Item
</div>
<style>
div {margin-bottom:10px;}
div span {
display:inline-flex;
align-items:center;
justify-content:center;
width:25px;
height:25px;
border-radius:50%;
background-color:#000;
color:#fff;
}
</style>
这样做能够做到咱们须要它做的事件,但也有一些毛病。其一,手写数字很艰难。而且,如果你须要批改一个数字怎么办?你就得一个一个地改。你能够应用 JavaScript 动静增加 <span>
元素来解决这些问题,然而这样会给 DOM 减少更多的节点,导致内存占用重大。
在大多数状况下,最好应用 CSS 计数器。让咱们检查一下起因。
CSS 计数器简介
CSS 计数器是网页范畴变量,能够应用 CSS 规定更改其值。
首先,应用 counter-reset
属性设置一个计数器。list-number
是此处要应用的变量名。
.list {counter-reset: list-number;}
接下来,应用 counter-increment
属性减少计数器的值。
.list div {counter-increment: list-number;}
当初,每次呈现 .list div
元素时,list-number
变量都会减少一。
最初,在内容属性和 counter()
函数中应用 :before
伪元素来显示数字。
.list div:before {content: counter(list-number);
}
这是残缺的代码:
<div class="list">
<div>My first item</div>
<div>My second item</div>
<div>My third item</div>
</div>
<style>
.list {counter-reset: list-number;}
/** 留神,咱们能够在:before 伪元素中应用 counter-increment **/
.list div:before {
counter-increment: list-number;
content: counter(list-number);
}
</style>
成果如下
咱们还没到那儿。让咱们设置 :before
伪元素的款式,使其看起来更好。
.list div:before {
counter-increment: list-number;
content: counter(list-number);
margin-right: 10px;
margin-bottom:10px;
width:35px;
height:35px;
display:inline-flex;
align-items:center;
justify-content: center;
font-size:16px;
background-color:#d7385e;
border-radius:50%;
color:#fff;
}
成果如下
扭转终点
默认状况下,counter-reset
函数将计数器设置为 0
,在第一次调用 counter-increment
函数后,从 1
开始。通过向 counter-reset
函数传递一个整数作为第二个参数来设置初始值。
.list {counter-reset: list-number 1;}
如果要从 0
开始,请将初始值设置为 -1
。
.list {counter-reset: list-number -1;}
更改增量值
默认状况下,counter-increment
会将计数器的值减少一个。就像 counter-reset
一样,你能够为 counter-increment
属性定义一个偏移量。
在此示例中,counter-reset
将 list-number
设置为 0
。每次调用 counter-increment
时,list-number
的值将减少 2
,因而,你将看到数字别离为 2
、4
和 6
。
.list {counter-reset: list-number;}
.list div:before {
counter-increment: list-number 2;
// 其余款式
}
计数器格局
counter()
函数能够具备两个参数:计数器名称和计数器格局。对于第二个参数,能够应用任何无效的 list-style-type
值,包含:
decimal
(e.g., 1, 2, 3…)lower-latin
(e.g., a, b, c…)lower-roman
(e.g., i, ii, iii…)
默认值为 decimal
。
例如,如果您像我一样酷爱迷信,则能够应用 lower-greek
进行 alpha-beta 值编号。
.list div:before {
counter-increment: list-number;
content: counter(list-number, lower-greek);
// ... 其余款式
}
嵌套的计数器
应用嵌套的有序列表时,编号始终以以下格局显示:
如果你须要子列表项的数字(例如 1.1
),则能够将 CSS 计数器与 counters()
函数一起应用。
<ol>
<li>
My First Item
<ol>
<li>My Nested First Item</li>
<li>My Nested Second Item</li>
</ol>
</li>
<li>My Second Item</li>
</ol>
<style>
ol {
list-style-type:none;
counter-reset:list;
}
ol li:before {
counter-increment:list;
content: counters(list, ".") ".";
}
</style>
成果如下
请留神,咱们应用的是 counters()
函数,而不是 counter()
。
counters()
函数的第二个参数是连贯字符串。它还能够具备第三个参数来设置格局(例如希腊语或罗马语)。
带有题目的嵌套计数器
<h1>
,<h2>
之类的元素未嵌套在文档中。它们显示为不同的元素,但仍代表一种层次结构。以下是将嵌套数字增加到题目之前的办法:
body {counter-reset:h1;}
h1 {counter-reset:h2;}
h1:before {
counter-increment: h1;
content: counter(h1) ".";
}
h2:before {
counter-increment:h2;
content: counter(h1) "." counter(h2) ".";
}
每次找到一个 h1
,h2
计数器就会重置。文档中的每一个 <h2>
都会失去一个绝对于 <h1>
的 x.y.
的数字。
浏览器反对
值得庆幸的是,自从 CSS2 引入 CSS 计数器以来,浏览器就广泛支持它们。尽管在 content
以外的属性中应用 counter()
函数仍是实验性的,但你能够毫不犹豫地做咱们在本教程中波及到的所有练习。
以下是我能够应用的浏览器反对详细信息。
一个简略的挑战
你筹备好应答波及 CSS 计数器的简略挑战了吗?
应用 CSS 计数器,在 10 行代码中显示 1
到 1000
及其罗马字符。
如果你感到困惑,请依照以下步骤操作:
要创立 1,000 个 div
元素,请应用以下内容。
for (var i = 0; i < 1000; i++) {document.body.appendChild( document.createElement("div") );
}
CSS counters:
body {counter-reset:number;}
div:before {
counter-increment:number;
content: counter(number) "=>" counter(number, lower-roman);
}
成果如下
你想出了什么?
论断
以下是咱们应用的属性的列表。
CSS counters 是 CSS 中中鲜为人知的性能,但你会诧异于它的应用频率。在本教程中,咱们介绍了如何以及何时应用 CSS 计数器,并列举了一些例子。
属性 | 应用 |
---|---|
counter-reset | 将计数器重置(或创立)为给定值(默认为 0) |
counter-increment | 给定计数器减少给定偏移量(默认为 1) |
counter(counter-name, counter-format) | 从给定格局获取计数器的值 |
counters(counter-name, counter-string, counter-format) | 从给定的格局获取嵌套计数器的值 |
当然,CSS 计数器是很酷。但我放心的一点是,所有的计数器都是全局的。如果你在一个有很多 CSS 文件的大我的项目中应用了很多,你可能会找不到它们的创立、重置和增量地位。如果能够的话,不要适度应用,如果肯定要应用的话,肯定要用描述性的名字做计数器,防止抵触。
原文:https://blog.logrocket.com
作者:Supun Kavinda