• 技术文章 >web前端 >css教程

    css counter-increment属性怎么用

    (*-*)浩(*-*)浩2019-05-29 10:05:09原创880
    counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

    说明

    利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。

    注释:如果使用了 "display: none",则无法增加计数。如使用 "visibility: hidden",则可增加计数。

    描述
    none
    默认。选择器无计数器增量。
    id number

    id 定义将增加计数的选择器、id 或 class。

    number 定义增量。number 可以是正数、零或者负数。

    inherit
    规定应该从父元素继承 counter-increment 属性的值。

    实例

    对部分和子部分进行编号(比如 "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核实处理。
    专题推荐:css
    上一篇:css border-left-width属性怎么用 下一篇:css border-bottom-color属性怎么用
    PHP编程就业班

    相关文章推荐

    • css animation-direction属性怎么用• css animation-duration属性怎么用• css border-style属性怎么用• css animation-iteration-count属性怎么用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网