css counter-increment屬性怎麼用
- (*-*)浩原創
- 2019-05-29 10:05:091976瀏覽
counter-increment 屬性設定某個選取器每次出現的計數器增量。預設增量是 1。
說明
利用這個屬性，計數器可以遞增（或遞減）某個值，可以是正值或負值。如果沒有提供 number 值，則預設為 1。
註解：如果使用了 "display: none"，則無法增加計數。如使用 "visibility: hidden"，則可增加計數。
| 值 | #描述 |
| id 定義將增加計數的選擇器、id 或 class。 number 定義增量。 number 可以是正數、零或負數。 | |
實例
#對部分和子部分進行編號（例如"Section 1"、"1.1"、"1.2 "）的方法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。</p>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>以上是css counter-increment屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn