Bộ phản - Thủ thuật CSS

Mục lục:

Anonim

Các counter-setthuộc tính CSS, đúng như tên gọi của nó, đặt giá trị khởi đầu cho một bộ đếm CSS. Bạn biết danh sách có thứ tự bắt đầu từ 1 và sau đó tăng dần lên từ đó không? Các counter-setbất động sản cho phép chúng ta thiết lập rằng bắt đầu tăng giá trị cho cái gì khác, nói, -1. Hoặc 2. Hoặc 200! Ngoại trừ việc nó được áp dụng cho bộ đếm CSS thay vì danh sách có thứ tự.

Vì vậy, giả sử chúng ta có một bộ đếm tùy chỉnh cho danh sách các chương sách, trong đó số chương được thêm vào trước tên chương.

Chúng tôi sẽ bắt đầu bằng cách xác định một bộ đếm với thuộc counter-resettính. Chúng tôi sẽ gọi nó chaptervà định nghĩa nó trên một lớp vùng chứa cha cho các chương của chúng tôi được gọi, một cách sáng tạo .chapters,.

.chapters ( counter-reset: chapter; )

Tiếp theo, chúng tôi sẽ gán bộ chapterđếm cho một phần tử bằng cách sử dụng thuộc counter-incrementtính. Vì đây là các chương sách, chúng tôi sẽ áp dụng chúng cho

, giả sử tên sách sẽ là

. Lưu ý rằng chúng tôi đang thực sự gán nó cho :beforephần tử giả vì nó cho phép chúng tôi thêm bộ đếm của mình vào

thành phần. 
h2:before ( counter-increment: chapter; )

Tuyệt vời, điều cuối cùng chúng ta cần là cho quầy biết nó sẽ hiển thị những gì. Điều đó được thực hiện trên thuộc contenttính thông qua counter()hàm. Chúng tôi cũng sẽ ném một chút màu lên quầy vì thiết kế yêu cầu nó.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Này, chúng tôi đang tìm kiếm tốt!

Nhưng đợi đã! Tôi không thực sự đào sâu sự thật rằng chúng ta đang bắt đầu từ Chương 1. Ý tôi là, “Forward” không thực sự là một chương. Nếu bất cứ điều gì, nó giống như Chương 0.

Đó là nơi counter-setđi vào! Hãy đặt mọi thứ bắt đầu từ 0:

h2:first-of-type::before ( counter-set: chapter; )

Bắt đầu! Cái đó tốt hơn. Chỉ bằng cách đặt giá trị thuộc tính thành tên của bộ đếm, chúng ta đã đặt danh sách các chương bắt đầu từ Chương 0. Chúng ta có thể dễ dàng đặt nó bắt đầu ở một thứ khác, chẳng hạn như chương 100.

Và nếu một trình duyệt không hỗ trợ counter-set? Không có gì thực sự. Nó sẽ đơn giản bị bỏ qua và danh sách sẽ bắt đầu ở chế độ mặc định 1,.

Cú pháp

( ? )+ | none

Về cơ bản, đây là một cách nói hay để nói thuộc tính lấy tên của bộ đếm tùy chỉnh ( ) và giá trị bắt đầu ( ). Hoặc đặt nó thành nonevà việc đánh số sẽ bắt đầu ở điểm bắt đầu mặc định , 1.

  • Giá trị ban đầu: none
  • Áp dụng cho: tất cả các yếu tố (bao gồm cả những yếu tố không trực quan)
  • Kế thừa: không
  • Loại hoạt ảnh: theo loại giá trị được tính toán

Giá trị

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Lưu ý rằng counter-setsẽ tạo một bộ đếm mới nếu tên bộ đếm được khai báo trên nó chưa được xác định ở một nơi khác.

Hỗ trợ trình duyệt

I E Cạnh Firefox Trình duyệt Chrome Safari Opera
Không Không 68+ Không Không Không
Chrome dành cho Android Android Firefox Trình duyệt Android iOS Safari Opera Mini
Không 79+ Không Không Không
Nguồn: caniuse

đọc thêm

  • Đặc điểm kỹ thuật mô-đun danh sách CSS cấp 3 (Bản thảo đang làm việc)
  • Hiển thị Bước hiện tại với Bộ đếm CSS
  • Đếm với bộ đếm và lưới CSS
  • Cách đảo ngược bộ đếm tùy chỉnh CSS