在web開發中，使用CSS計數器可以很好地幫助我們實現一些有趣的效果。比如，我們可以使用CSS計數器實現買票的功能，讓用戶可以在頁面上選擇座位，并購買所需的票數。

首先，我們需要給座位設置一個數字ID。在CSS中，我們可以通過計數器來自動生成這些ID。我們可以定義一個計數器，然后在每個座位上使用counter-increment屬性來增加計數器的值，并使用content屬性將這個值作為座位的ID輸出。

body {
counter-reset: seat 1;
}
.seat {
counter-increment: seat;
content: "seat " counter(seat);
}

上面的代碼中，我們首先使用counter-reset屬性將計數器seat的初始值設為1。然后在每個座位的樣式中，使用counter-increment屬性來增加計數器的值。最后使用content屬性輸出計數器的值作為座位的ID。

接下來，我們可以使用CSS的:checked偽類來為每個座位創建一個復選框。當用戶勾選座位時，復選框的:checked狀態就會被激活，并給座位添加一個選中的樣式。

.seat input[type="checkbox"] {
position: absolute;
left: -9999px;
}
.seat input[type="checkbox"]:checked + label {
background-color: #3c3c3c;
color: #fff;
}

上面的代碼中，我們首先將每個座位的復選框移出可視范圍，然后使用:checked偽類為選中的座位設置樣式。當座位的復選框被選中時，對應的label元素就會被渲染成選中狀態的樣式。

最后，當用戶提交購票請求時，我們可以使用CSS的:after偽元素來顯示用戶選中的座位和數量，并將這些數據傳遞給后臺做進一步處理。

#confirmation:after {
content: "You have selected " counter(seat) " seats.";
font-weight: bold;
}

上面的代碼中，我們使用:after偽元素在一個確認框中顯示用戶選擇的座位和數量。我們通過counter()函數來獲取計數器seat的最終值，并將它作為字符串插入到content屬性中。

在這篇文章中，我們已經學習了如何使用CSS計數器來實現一個簡單的購票系統。通過使用計數器、:checked偽類和:after偽元素，我們可以讓用戶方便地選擇座位并購買所需的票數。