CSS counter-increment

counter-increment ₂

---

Thuộc tính counter-increment khi sử dụng sẽ gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số)

Thuộc tính	giá trị	Ví dụ	Mô tả
counter-increment	giá trị id	counter-increment: tenBatky;	Sử dụng xác định sự liên quan giữa các giá trị counter-increment và content.
	none	counter-increment: none;	Thành phần không được gia tăng.
	inherit	counter-increment: inherit;	kế thừa

Xem ví dụ 1

<style>
#tttj {counter-reset: tra;}

h2:before
{
counter-increment:tra;
content:counter(tra1) "." counter(tra) " - ";/* các chuỗi số đếm có thể được liệt kê nối tiếp nhau | số 0 màu, số 1-7 màu*/
}

</style>

<div id="tttj">
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h2>XML</h2>
<h2>XSL</h2>

</div>

HTML Tutorial

XHTML Tutorial

CSS Tutorial

JavaScript

VBScript

XML

XSL

Xem ví dụ 2

<style>
#ttt {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Chương " counter(section) ". ";
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " - ";
}
</style>

<div id="ttt">
<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>

</div>

HTML tutorials

HTML Tutorial

XHTML Tutorial

CSS Tutorial

Scripting tutorials

JavaScript

VBScript

XML tutorials

XML

XSL

Sự tương thích ( Cập nhật / Báo lỗi )

---