了解CSS計數器及其用例

>某些CSS功能我們可能不經常使用。我認為CSS計數器對我們大多數人都屬於該類別，很可能有兩個原因：>

他們似乎沒有很多用例。
1. 編寫它們的代碼有點複雜。
>
>我最近看到了一個用於計數器的實際用例，所以我認為我會在此處提供簡短的速成課程，並在此處分享該用例。

鑰匙要點

> CSS計數器提供CSS中的動態編號，從而允許非連續項目編號，可以重新排序而無需手動調整編號。這是通過使用偽元素和針對特定的CSS來實現的。

>
• 儘管最初的複雜性，CSS計數器一旦了解了CSS的偽元素的概念。雖然生成的內容可能會引起可訪問性問題，但大多數瀏覽器都支持它，並且屏幕閱讀器識別。 在W3C的Selectors 4級規格中可以看到
用於CSS計數器的實用用例，其中用來編號“問題”和“示例”，並散佈在內容中。這允許在自動更新編號時輕鬆添加，刪除或重新排序項目。
• >
• > CSS計數器中的速成課程

> CSS計數器允許您使用動態編號在CSS中進行編號，類似於有序列表的工作方式。但是CSS計數器完全不同。此功能使用偽元素與某些針對特定的CSS相結合，將動態“計數”附加到指定的元素集。 >。

這是一個代碼示例，類似於我將在本文結尾處的演示中使用的代碼示例：

>第一個聲明塊定義了計數的範圍。這意味著我的計數器只會在具有.Container類的元素中增加。我選擇了一個稱為“問題”的自定義標識符，這是將容器鏈接到所計數元素所必需的。

第二個聲明塊使用以下方式：偽元素之前（我可以使用：之後，但在計數器中很少）和內容屬性來預留定義的內容。

<span><span>.container</span> {
</span>  <span>counter-reset: issues 0;
</span><span>}
</span>
<span><span>.issue:before</span> {
</span>  <span>counter-increment: issues 1;
</span>  <span>content: "Issue " counter(issues, decimal);
</span>  <span>display: block;
</span><span>}</span>

作為內容屬性值的一部分，我正在使用counter（）函數以及一個字符串，類似於在JavaScript或其他更典型的編程語言中可以完成的操作。 counter（）函數採用兩個參數：前面定義的計數器標識符（在這種情況下為“問題”）和計數器樣式，它們可以是在有序列表中用於列表式式屬性屬性的任何值。默認值是“十進制”，我在此示例中使用了。

>

如果您仍然感到困惑，則該迷你信息圖可能會有所幫助：>

>如果還不夠

> CSS計數器：櫃檯和朋友（令人印象深刻的網）
• >
>如何從CSS生成的內容和計數器（Smashing Magazine）中受益
> CSS計數器樣式級別3（W3C規格）
• >

最後一個鏈接是計數器規格的編輯草案，它引入了一些全新的反相關功能，這些功能可能沒有太多（如果有的話）瀏覽器支持，並且可能在該規範的將來版本中受到風險。但是，我在本文中使用的功能是跨瀏覽器，返回IE8。

確定CSS計數器的值

從表面上看，首先考慮實施CSS計數器時出現了兩個主要問題：

>訂購的列表已經這樣做，所以為什麼我需要一個如此復雜的功能才能數字項目？

生成的內容無法訪問，這是將內容與演示文稿混合。 >

1. >這兩個問題中的第一個實際上不是一個問題。如果要編號的連續項目，則使用有序列表（即帶有嵌套
2. 元素的
   ）是合適的。但是CSS計數器不用於編號連續項目。它們用於編號非連續項目，無論它們可能在DOM中，然後能夠重新排序，而無需更改每個預備的數字。
>此外，儘管乍一看，櫃檯可能會有些複雜，但一旦您掌握了CSS的偽元素的概念，但它們確實並不難修改和維護。
3. >與可訪問性有關的另一個問題似乎並不像過去那樣大問題。萊尼·沃森（LéonieWatson）的一篇文章得出結論：

“ [g]充滿活力的內容是在大多數瀏覽器中支持的可訪問性，並得到屏幕讀取器的認可。

但是，支持不是100％的支持，因此我要說的是，如果您要使用偽元素生成內容，則“內容”應該具有裝飾價值，對理解或功能至關重要它包含在網站上。考慮到這種平衡的方法，在某些情況下，應該使用以下所述的計數器。

一個簡單的用例

最近，我正在研究W3C的Selectors級別4規格，並指出它們在內容中散佈著“問題”和“示例”。我之前已經看過這一點，但是直到那時，我才決定對其進行一些調查。這些元素是編號的，所以我想知道它們如何能夠添加和刪除它們，而無需每次重新定位整個設置。我認為這可能是一個腳本，或者在後端或類似的東西上生成。

>

nope。他們使用的是CSS計數器，如下屏幕截圖所示：>

在他們的頁面中，他們有編號的問題（紅色框）和編號示例（黃色框）。使用每個計數集的自定義標識符，它們可以輕鬆添加，刪除甚至重新排序項目，CSS會自動將正確的數字添加到項目中。

>此外，這些規格頁面還包括頁面末尾的問題索引，該索引使用與問題相同的計數器標識符，但在新的範圍中，因此它開始了計數。重複的問題列表確實創造了更多的工作來維持問題，但是，只要訂單與內容主體中的更改相匹配，訂單通常很容易維護。 >>>>>

>拖放演示

>我已經重新創建了W3C的示例，以便您可以解決計數器的工作方式，同時也可以查看以這種方式創建動態列表的容易，從只有HTML和CSS的非標準項目來創建動態列表。

請參見Pen 20FE8F19AE48C210DA6C5DF78C0CF6F8 by sitepoint（@sitepoint）（@sitepoint）。 在演示中，我正在使用Jqueryui的可排序功能來拖動頁面上的任何段落，包括“問題”和“示例”框。請注意，數字如何根據項目的拖動位置而變化（儘管在拖動過程中數字的行為似乎有些古怪）。我還在底部包括了一個重複的“問題列表”，例如在W3C的頁面上。

結論

>這應該使CSS計數器可以使用哪些方法更清楚。想想任何經常被編輯的文檔，甚至可能在可以重新分組或重新排序項目的地方生成的用戶生成的內容。而且，如前所述，當編號對內容的理解和源中的項目不貼上至關重要時，這些計數器最有可能有用。

>

如果您看過以其他有用方式使用的CSS計數器，請在評論中告訴我們。

經常詢問有關CSS計數器的問題（常見問題解答）

CSS計數器的不同類型是什麼？

CSS計數器有兩種類型：“ Counter”和“ Counters”。 “計數器”類型用於單層計數器，例如文檔中的編號標題。另一方面，“計數器”類型用於多級計數器，例如部分內部的子段。兩種類型均與CSS中的“內容”屬性一起使用以顯示計數器的值。 >

>如何使用“計數器”屬性重置CSS計數器？此屬性設置了任何給定號碼的計數器。例如，“反序列：部分;”將“部分”計數器重置為零。您還可以設置針對不同數字的反擊，例如“反靜音：第5節；”，將“章節”計數器重置為五。

我可以使用列表的CSS計數器嗎？

>是的，可以將CSS計數器與列表一起使用。當您想自定義列表項目的編號時，這特別有用。您可以使用“反靜音”和“反插入”屬性來控制編號，而“ content”屬性顯示了計數器的值。 CSS計數器生成的數字可以像CSS中的任何其他文本一樣進行樣式。您可以使用諸如“顏色”，“字體大小”，“字體重量”等屬性來設置數字。當“內容”屬性生成時，該樣式將應用於數字。

我可以使用CSS計數器到編號表嗎？

是的，可以使用CSS計數器來編號表。這可以通過在“表”元素上使用“反序”屬性，“ tr”元素上的“反稅”屬性以及“ tre”元素上的“反稅”屬性以及“'''或'之前的“ content ”屬性- “ tr”元素中的元素。

>如何使用CSS計數器創建多級計數器？ CSS。此功能需要兩個參數：計數器的名稱和一個字符串用作級別之間的分離器。例如，'content：counters（“。”）;將創建一個具有分離器時期的多級計數器。

我可以使用帶有偽元素的CSS計數器嗎？是的，CSS計數器通常與“之前”和“後”元素元素一起使用。用於顯示計數器值的“ content”屬性只能與這些偽元素一起使用。

>

>如何增加CSS計數器？使用“反插入”屬性進行遞增。每次調用計數器的價值都會增加一個屬性。例如，“反合：部分；”將“部分”計數器增加一個。 。這可以通過將“反靜音”或“反插入”屬性設置為負數來完成。例如，“反序列：第-1節；”將“部分”與負面設置。

>我可以將CSS計數器與其他CSS屬性一起使用嗎？例如，您可以將“計數器”或“計數器”功能與“內容”屬性一起顯示來顯示計數器的值。您也可以使用任何元素使用“反靜音”和“反插入”屬性來控制計數器的價值。

以上是了解CSS計數器及其用例的詳細內容。更多資訊請關注PHP中文網其他相關文章！