This time I will bring you a detailed explanation of the Counters attribute of css. What are the precautions for using the Counters attribute of css? The following is a practical case, let’s take a look. counter-reset: This value is required. Must be used in selectors, mainly used to identify the scope, and its value can be customized.
counter-increment: Used to identify the range associated with the counter.content: used to generate content, which is an attribute of
:before
, :after or ::before, ::after. When generating counter content, it is mainly used together with counter(). counter(): This function is used to set the value of the insertion counter. :before, :after or ::before, ::after: used with content to generate counter content.
mdn example:
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>counters()函数_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /><style>ol { margin: 0; padding: 0 0 0 2em; list-style: none; counter-reset: item;
}li:before { counter-increment: item; content: counters(item, "."); color: #f00;
}</style></head><body><ol class="test">
<li>Node <ol>
<li>Node <ol>
<li>Node</li>
<li>Node</li>
<li>Node</li>
</ol>
</li>
<li>Node</li>
</ol>
</li>
<li>Node</li>
<li>Node</li></ol></body></html>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
The above is the detailed content of Detailed explanation of the Counters property of css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
