How to use css counter-increment attribute-CSS Tutorial-php.cn

How to use css counter-increment attribute

(*-*)浩

Release： 2019-05-29 10:05:09

Original

1967 people have browsed it

The counter-increment property sets the counter increment for each occurrence of a selector. The default increment is 1.

How to use css counter-increment attribute

Description

Using this attribute, the counter can be incremented (or decremented) by a certain value, which can be positive or negative value. If no number value is provided, it defaults to 1.

Note: If "display: none" is used, the count cannot be incremented. If "visibility: hidden" is used, the count can be increased.

Value	Description
none	default. Selector has no counter increment.
id number	id defines the selector, id, or class that will increment the count. number defines the increment. number can be positive, zero, or negative.
inherit	Specifies that the value of the counter-increment attribute should be inherited from the parent element.

Example

Number sections and subsections (e.g. "Section 1", "1.1", "1.2 ") method:

<!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>

Copy after login

The above is the detailed content of How to use css counter-increment attribute. For more information, please follow other related articles on the PHP Chinese website!