首頁 >web前端 >js教程 >css的Counters屬性詳解

css的Counters屬性詳解

php中世界最好的语言
php中世界最好的语言原創
2018-03-09 13:30:212279瀏覽

這次帶給大家css的Counters屬性詳解,使用css的Counters屬性注意事項有哪些,下面就是實戰案例,一起來看一下。

counter-reset:此值是必要的。必須用於選擇器,主要用來識別該作用域,其值可以自訂。
counter-increment:用來識別計數器與實際相關聯的範圍。
content:用來產生內容,其為:before、:after或::before、::after的一個屬性。在產生計數器內容,主要配合counter()一起使用。
counter():此函數用來設定插入計數器的值。
:before、:after或::before、::after:配合content用來產生計數器內容。

mdn的例子:

<!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>

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

在JS中encodeURI(url)怎麼不出現亂碼?

前後端資料應該如何科學交互作用

#CSS中的margin負值如何使用

chrome的記憶體不足頻繁崩潰怎麼處理

以上是css的Counters屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn