首頁 > web前端 > css教學 > 主體

css counter-increment屬性怎麼用

(*-*)浩
發布: 2019-05-29 10:05:09
原創
1967 人瀏覽過

counter-increment 屬性設定某個選取器每次出現的計數器增量。預設增量是 1。

css counter-increment屬性怎麼用

說明

利用這個屬性,計數器可以遞增(或遞減)某個值,可以是正值或負值。如果沒有提供 number 值,則預設為 1。

註解:如果使用了 "display: none",則無法增加計數。如使用 "visibility: hidden",則可增加計數。

##none預設.選擇器無計數器增量。 id ​​numberinherit規定應該從父元素繼承 counter-increment 屬性的值。
#描述



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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板