Detailed explanation of the Counters property of css-JS Tutorial-php.cn

Detailed explanation of the Counters property of css

php中世界最好的语言

Release： 2018-03-09 13:30:21

Original

2248 people have browsed it

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>

Copy after login

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!