>某些CSS功能我們可能不經(jīng)常使用。我認為CSS計數(shù)器對我們大多數(shù)人都屬於該類別，很可能有兩個原因：
- 他們似乎沒有很多用例。
- 編寫它們的代碼有點複雜。 >
- >我最近看到了一個用於計數(shù)器的實際用例，所以我認為我會在此處提供簡短的速成課程，並在此處分享該用例。
鑰匙要點
> CSS計數(shù)器提供CSS中的動態(tài)編號，從而允許非連續(xù)項目編號，可以重新排序而無需手動調(diào)整編號。這是通過使用偽元素和針對特定的CSS來實現(xiàn)的。
- >
- 儘管最初的複雜性，CSS計數(shù)器一旦了解了CSS的偽元素的概念。雖然生成的內(nèi)容可能會引起可訪問性問題，但大多數(shù)瀏覽器都支持它，並且屏幕閱讀器識別。 在W3C的Selectors 4級規(guī)格中可以看到 用於CSS計數(shù)器的實用用例，其中用來編號“問題”和“示例”，並散佈在內(nèi)容中。這允許在自動更新編號時輕鬆添加，刪除或重新排序項目。
- >
- > CSS計數(shù)器中的速成課程
這是一個代碼示例，類似於我將在本文結(jié)尾處的演示中使用的代碼示例：
>第一個聲明塊定義了計數(shù)的範圍。這意味著我的計數(shù)器只會在具有.Container類的元素中增加。我選擇了一個稱為“問題”的自定義標識符，這是將容器鏈接到所計數(shù)元素所必需的。
第二個聲明塊使用以下方式：偽元素之前（我可以使用：之後，但在計數(shù)器中很少）和內(nèi)容屬性來預(yù)留定義的內(nèi)容。
<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>作為內(nèi)容屬性值的一部分，我正在使用counter（）函數(shù)以及一個字符串，類似於在JavaScript或其他更典型的編程語言中可以完成的操作。 counter（）函數(shù)採用兩個參數(shù)：前面定義的計數(shù)器標識符（在這種情況下為“問題”）和計數(shù)器樣式，它們可以是在有序列表中用於列表式式屬性屬性的任何值。默認值是“十進制”，我在此示例中使用了。 >
如果您仍然感到困惑，則該迷你信息圖可能會有所幫助：>如果還不夠
- > CSS計數(shù)器：櫃檯和朋友（令人印象深刻的網(wǎng)）
- > >如何從CSS生成的內(nèi)容和計數(shù)器（Smashing Magazine）中受益
- > CSS計數(shù)器樣式級別3（W3C規(guī)格）
- >
確定CSS計數(shù)器的值
從表面上看，首先考慮實施CSS計數(shù)器時出現(xiàn)了兩個主要問題：>訂購的列表已經(jīng)這樣做，所以為什麼我需要一個如此復(fù)雜的功能才能數(shù)字項目？
生成的內(nèi)容無法訪問，這是將內(nèi)容與演示文稿混合。- >這兩個問題中的第一個實際上不是一個問題。如果要編號的連續(xù)項目，則使用有序列表（即帶有嵌套
- 元素的
- ）是合適的。但是CSS計數(shù)器不用於編號連續(xù)項目。它們用於編號非連續(xù)項目，無論它們可能在DOM中，然後能夠重新排序，而無需更改每個預(yù)備的數(shù)字。
>此外，儘管乍一看，櫃檯可能會有些複雜，但一旦您掌握了CSS的偽元素的概念，但它們確實並不難修改和維護。
- >與可訪問性有關(guān)的另一個問題似乎並不像過去那樣大問題。萊尼·沃森（LéonieWatson）的一篇文章得出結(jié)論：
“ [g]充滿活力的內(nèi)容是在大多數(shù)瀏覽器中支持的可訪問性，並得到屏幕讀取器的認可。
但是，支持不是100％的支持，因此我要說的是，如果您要使用偽元素生成內(nèi)容，則“內(nèi)容”應(yīng)該具有裝飾價值，對理解或功能至關(guān)重要它包含在網(wǎng)站上?？紤]到這種平衡的方法，在某些情況下，應(yīng)該使用以下所述的計數(shù)器。一個簡單的用例
最近，我正在研究W3C的Selectors級別4規(guī)格，並指出它們在內(nèi)容中散佈著“問題”和“示例”。我之前已經(jīng)看過這一點，但是直到那時，我才決定對其進行一些調(diào)查。這些元素是編號的，所以我想知道它們?nèi)绾文軌蛱砑雍蛣h除它們，而無需每次重新定位整個設(shè)置。我認為這可能是一個腳本，或者在後端或類似的東西上生成。>
nope。他們使用的是CSS計數(shù)器，如下屏幕截圖所示：
在他們的頁面中，他們有編號的問題（紅色框）和編號示例（黃色框）。使用每個計數(shù)集的自定義標識符，它們可以輕鬆添加，刪除甚至重新排序項目，CSS會自動將正確的數(shù)字添加到項目中。
>此外，這些規(guī)格頁面還包括頁面末尾的問題索引，該索引使用與問題相同的計數(shù)器標識符，但在新的範圍中，因此它開始了計數(shù)。重複的問題列表確實創(chuàng)造了更多的工作來維持問題，但是，只要訂單與內(nèi)容主體中的更改相匹配，訂單通常很容易維護。>拖放演示
>我已經(jīng)重新創(chuàng)建了W3C的示例，以便您可以解決計數(shù)器的工作方式，同時也可以查看以這種方式創(chuàng)建動態(tài)列表的容易，從只有HTML和CSS的非標準項目來創(chuàng)建動態(tài)列表。
請參見Pen 20FE8F19AE48C210DA6C5DF78C0CF6F8 by sitepoint（@sitepoint）（@sitepoint）。 在演示中，我正在使用Jqueryui的可排序功能來拖動頁面上的任何段落，包括“問題”和“示例”框。請注意，數(shù)字如何根據(jù)項目的拖動位置而變化（儘管在拖動過程中數(shù)字的行為似乎有些古怪）。我還在底部包括了一個重複的“問題列表”，例如在W3C的頁面上。結(jié)論
>這應(yīng)該使CSS計數(shù)器可以使用哪些方法更清楚。想想任何經(jīng)常被編輯的文檔，甚至可能在可以重新分組或重新排序項目的地方生成的用戶生成的內(nèi)容。而且，如前所述，當編號對內(nèi)容的理解和源中的項目不貼上至關(guān)重要時，這些計數(shù)器最有可能有用。
>如果您看過以其他有用方式使用的CSS計數(shù)器，請在評論中告訴我們。
經(jīng)常詢問有關(guān)CSS計數(shù)器的問題（常見問題解答）
CSS計數(shù)器的不同類型是什麼？CSS計數(shù)器有兩種類型：“ Counter”和“ Counters”。 “計數(shù)器”類型用於單層計數(shù)器，例如文檔中的編號標題。另一方面，“計數(shù)器”類型用於多級計數(shù)器，例如部分內(nèi)部的子段。兩種類型均與CSS中的“內(nèi)容”屬性一起使用以顯示計數(shù)器的值。 我可以使用列表的CSS計數(shù)器嗎？ >如何使用CSS計數(shù)器創(chuàng)建多級計數(shù)器？ CSS。此功能需要兩個參數(shù)：計數(shù)器的名稱和一個字符串用作級別之間的分離器。例如，'content：counters（“?！保?將創(chuàng)建一個具有分離器時期的多級計數(shù)器。 >如何增加CSS計數(shù)器？使用“反插入”屬性進行遞增。每次調(diào)用計數(shù)器的價值都會增加一個屬性。例如，“反合：部分；”將“部分”計數(shù)器增加一個。 。這可以通過將“反靜音”或“反插入”屬性設(shè)置為負數(shù)來完成。例如，“反序列：第-1節(jié)；”將“部分”與負面設(shè)置。>如何使用“計數(shù)器”屬性重置CSS計數(shù)器？此屬性設(shè)置了任何給定號碼的計數(shù)器。例如，“反序列：部分;”將“部分”計數(shù)器重置為零。您還可以設(shè)置針對不同數(shù)字的反擊，例如“反靜音：第5節(jié)；”，將“章節(jié)”計數(shù)器重置為五。
是的，可以使用CSS計數(shù)器來編號表。這可以通過在“表”元素上使用“反序”屬性，“ tr”元素上的“反稅”屬性以及“ tre”元素上的“反稅”屬性以及“'''或'之前的“ content ”屬性- “ tr”元素中的元素。
我可以使用帶有偽元素的CSS計數(shù)器嗎？是的，CSS計數(shù)器通常與“之前”和“後”元素元素一起使用。用於顯示計數(shù)器值的“ content”屬性只能與這些偽元素一起使用。
>>我可以將CSS計數(shù)器與其他CSS屬性一起使用嗎？例如，您可以將“計數(shù)器”或“計數(shù)器”功能與“內(nèi)容”屬性一起顯示來顯示計數(shù)器的值。您也可以使用任何元素使用“反靜音”和“反插入”屬性來控制計數(shù)器的價值。
以上是了解CSS計數(shù)器及其用例的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
開發(fā)人員的快捷方式到您的Udemy樣平臺
Jun 17, 2025 pm 04:43 PM
在開發(fā)類似於Udemy的學(xué)習平臺時，重點不僅僅是內(nèi)容質(zhì)量。同樣重要的是如何交付內(nèi)容。這是因為現(xiàn)代教育平臺依賴於媒體，快速且易於消化。
用於購買SSL證書的經(jīng)濟有效的轉(zhuǎn)售商平臺
Jun 25, 2025 am 08:28 AM
在一個在線信任不可談判的世界中，SSL證書對於每個網(wǎng)站都至關(guān)重要。 SSL認證的市場規(guī)模在2024年價值56億美元，並且由於電子商務(wù)業(yè)務(wù)的激增而推動了強勁的增長
SaaS的5個最佳支付門戶：您的最終指南
Jun 29, 2025 am 08:28 AM
付款網(wǎng)關(guān)是付款過程的關(guān)鍵組成部分，使企業(yè)能夠在線接受付款。它充當客戶與商人之間的橋樑，安全地傳輸付款信息並促進交易。 為了
新研究聲稱AI比我們更好地'理解”情緒。特別是在情感上充滿電的情況下
Jul 03, 2025 pm 05:48 PM
在我們認為人類始終超越機器的領(lǐng)域的另一個挫折中，研究人員現(xiàn)在建議AI比我們更好地理解情感。研究人員發(fā)現(xiàn)人工智能證明了一個
您的設(shè)備餵養(yǎng)AI助手並收集個人數(shù)據(jù)，即使他們睡著了。這是如何知道您分享的內(nèi)容。
Jul 05, 2025 am 01:12 AM
不管喜歡與否，人工智能已成為日常生活的一部分。許多設(shè)備（包括電動剃須刀和牙刷）已成為AI驅(qū)動的“使用機器學(xué)習算法來跟蹤一個人的使用方式，Devi的方式
由於新的Microsoft AI型號
Jul 05, 2025 am 12:44 AM
一種新的人工智能（AI）模型已經(jīng)證明了比幾個使用最廣泛使用的全球預(yù)測系統(tǒng)更快，更精確地預(yù)測重大天氣事件的能力。該名為Aurora的模型已接受過培訓(xùn)。
將所有東西外包給AI會損害我們?yōu)樽约核伎嫉哪芰幔?/a>
高級AI型號的CO＆＃8322;回答相同問題時的排放量比更常見的LLM
Jul 06, 2025 am 12:37 AM
根據(jù)最近的一項研究，我們試圖使AI模型的功能越精確，其碳排放量就越大 - 某些提示產(chǎn)生的二氧化碳比其他提示高達50倍。
