Định nghĩa và sử dụng
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ố).
Cấu trúc
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). |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>HTML/XHTML</p> <p>CSS</p> <p>JQUERY</p> <p>JAVASCRIPT</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
HTML/XHTML
CSS
JQUERY
JAVASCRIPT
CSS viết:
body {counter-reset: tenBatKy;} p:before { counter-increment: tenBatKy; content: counter(tenBatKy) "."; }
Hiển thị trình duyệt khi có CSS:
HTML/XHTML
CSS
JQUERY
JAVASCRIPT
Trình duyệt hỗ trợ
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