Home > Article > Web Front-end > Detailed explanation of the Counters property of css

Detailed explanation of the Counters property of css

php中世界最好的语言Original: 2018-03-09 13:30:212239browse

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!

Detailed explanation of the Counters property of css

Related articles