CSS计数器应用之修饰有序表单

发布时间：2022-04-20 08:50:14 所属栏目：语言来源：互联网

导读：css计数器是一个通过变量来设置，根据规则递增变量。在web设计中，我们常会使用到有序列表，有序列表的好处就是能够清楚地展示网站内容，但是如果只是单纯的数字，那么页面不够美观，而且手动添加样式又很麻烦。如果我们使用CSS计数器就能很便捷的美化数字有

css计数器是一个通过变量来设置，根据规则递增变量。在web设计中，我们常会使用到有序列表，有序列表的好处就是能够清楚地展示网站内容，但是如果只是单纯的数字，那么页面不够美观，而且手动添加样式又很麻烦。如果我们使用CSS计数器就能很便捷的美化数字有序列表。下面我们一起来看看CSS计数器怎么用。

     有序列表的问题
       当你写了一个如下的有序列表，浏览器会自动在列表项前面加上数字

<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>
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;
}

       这确实是我们想要做的效果，但是也有一些缺点。首先，手动添加数字是很麻烦的。如果你需要更改一个编号，你必须一个接一个地改变它们。面对这种情况，你可以使用 JavaScript 动态添加 <span> 标签来解决这些问题，但这会为 DOM 添加更多的节点，从而导致大量内存占用。

       在大多数情况下，最好使用CSS计数器。让我们来看看原因。

       CSS计数器简介
       CSS计数器是网页范围变量，其值可以使用 CSS 规则更改。

       这里是完整代码:

<div class="list">
  <div>My first item</div>
  <div>My second item</div>
  <div>My third item</div>
</div>
div.list {
  counter-reset: list-number;
}
/** 可以在:before 为元素中使用 counter-increment **/
div.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
}
       现在我们还没有完全达到目标。让我们对 :before 伪元素进行样式设计，使其看起来更好。

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Spring MVC和Struts2的	C++ partition 和stab
C++ STL map容器解说	C++ STL map容器迭代器