css counter-increment属性如何用-百分百源码网

css counter-increment属性如何用

发布时间：09/01 来源：未知浏览：关键词：

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属性如何用的具体内容，更多请关注百分百源码网其它相关文章！

打赏