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

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

Giá trị

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:

html<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>

css#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:

html<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>

css#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:

html<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>

css#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:

html<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>

css#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:

html<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>

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

Результат:

Xem thêm