CSS3 數字格式允許網頁設計人員自定義網頁內數字的顯示格式。數字格式化屬性是利用偽元素來生成所需的數字。以下是數字格式化可以使用的一些屬性。
p { counter-reset: section; } p::before { counter-increment: section; content: "Section " counter(section) ": "; }
使用上述屬性可以在每段文本前加上一個自動生成的編號。其中,counter-reset 屬性設置計數器名稱和初始值,而 counter-increment 屬性對計數器值進行逐個遞增操作。content 屬性定義生成的文本內容,其中 counter(section) 用于輸出計數器值,使自動編號內容得以顯示。
.hot { color: red } .cold { color: blue } .hot::before { content: "+"; } .cold::before { content: "-"; }
另外一個示例是,使用 CSS3 數字格式可以生成帶有正/負號及顏色的數字。在這個例子中,.hot 類的數字前面會自動加上“+”號,且文字顏色為紅色;而 .cold 類前面則加上“-”號,文本顏色為藍色。
CSS3 數字格式還可以結合使用偽類和自定義屬性,實現更復雜的數字格式化效果,如貨幣和時間格式等。這種靈活的數字格式化能力可以幫助網頁設計人員為不同的網頁元素設計各種獨特的數字樣式。