Thuộc tính counter-increment

Đăng bởi: Admin

Định nghĩa và sử dụng

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ố).

Cấu trúc

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

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
counter-increment giá trị id counter-increment: tenBatky; Sử dụng một tên nào đó để 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; 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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

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

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

Link liên quan


vncoder logo

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!

Chia sẻ bài viết