css的Counters屬性詳解
- php中世界最好的语言原創
- 2018-03-09 13:30:212253瀏覽
這次帶給大家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中文網其它相關文章！
相關閱讀：
以上是css的Counters屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn