Thuộc tính counter-increment

Thuộc tính counter-increment thiết lập việc đánh số tự động các phần tử, ví dụ như đoạn văn hoặc tiêu đề. Được sử dụng cùng với thuộc tính counter-reset, các phần tử giả after và before, thuộc tính content, bên trong sử dụng hàm counter. Để hiểu rõ hơn, tôi khuyên bạn nên xem các ví dụ.

Cú pháp

bộ chọn {
	counter-increment: tên [bước] | none;
}

Giá trị

Giá trị	Mô tả
tên	Tên của bộ đếm. Một từ thông thường (như tên class hoặc id). Có thể thiết lập nhiều tên, phân tách chúng bằng dấu cách. Trong trường hợp này, nhiều bộ đếm sẽ được thay đổi cùng lúc.
bước	Số nguyên dương hoặc âm. Tham số không bắt buộc.
`none`	Cấm tăng bộ đếm cho bộ chọn hiện tại.

Giá trị mặc định: none.

Ví dụ

Hãy làm sao cho các đoạn văn được đánh số tự động:

<div id="parent">
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

Ví dụ

Giả sử ngoài số, còn thêm một vài văn bản. Trong trường hợp của chúng ta là № trước chữ số và dấu chấm sau:

<div id="parent">
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Ví dụ

Hãy bắt đầu đánh số từ 10. Để làm điều này, đặt giá trị ban đầu của bộ đếm là chín, tức là 1 ít hơn chúng ta cần:

<div id="parent">
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Ví dụ

Giả sử bây giờ việc đánh số sẽ có bước là "2". Để làm điều này, chúng ta đặt hai làm bước:

<div id="parent">
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* đặt hai */
	content: "№" counter(test) ".";
}

Ví dụ

Trong ví dụ trước, việc đánh số bắt đầu từ hai, trong khi chúng ta muốn từ một. Tại sao lại như vậy? Bởi vì counter-reset đặt lại giá trị bộ đếm về 0, và sau đó counter-increment thêm bước của nó: mặc định là một, do đó trước đây chúng ta đánh số bắt đầu từ 1. Còn bây giờ cộng thêm hai - và việc đánh số bắt đầu từ hai.

Để khắc phục vấn đề, hãy đặt giá trị ban đầu của bộ đếm thành -1 và bây giờ việc đánh số sẽ bắt đầu từ 1 và sẽ tăng lên 2:

<div id="parent">
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
	<p>văn bản</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Xem thêm

thuộc tính counter-reset,
reset giá trị bộ đếm về 0