Thuộc tính counter-reset

Đăng bởi: Admin

Thuộc tính counter-reset tạo hoặc reset một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số).

tag {
    counter-reset: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
counter-reset	giá trị id	counter-reset: tenBatky;	Sử dụng một tên nào đó để xác định sự liên quan giữa các giá trị cần tạo hoặc reset.
	none	counter-reset: none;	Thành phần không được tạo hoặc reset.
	inherit	counter-reset: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

<html>
<head></head>
<body>
<p>HTML/XHTML</p>
<p>CSS</p>
<p>JQUERY</p>
<p>JAVASCRIPT</p>
</body>
</html>

HTML/XHTML

CSS

JQUERY

JAVASCRIPT

body {counter-reset: tenBatKy;}

p:before {
    counter-increment: tenBatKy;
    content: counter(tenBatKy) ".";
}

HTML/XHTML

CSS

JQUERY

JAVASCRIPT

Thuộc tính counter-reset được hỗ trợ trong đa số các trình duyệt.

IE8 đòi hỏi phải có !Doctype

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!