CSS計數器counter 的用法簡介

2022-09-25 07:48:08 字數 853 閱讀 4105

使用counter()在列表中自動新增序號

另外乙個在css 2.1在就已經支援的功能是counter(),使用它,你能方便的在頁面標題,區塊和其它各種連續出現的頁面內容上新增序號。有了它,你就不必限制於只能使用

來實現這個效果,你可以更靈活的在頁面上使用自定義數字序列。

counter-reset定義和用法

counter-reset 屬性設定某個選擇器出現次數的計數器的值。預設為 0。

利用這個屬性,計數器可以設定或重置為任何值,可以是正值或負值。如果沒有提供 number,則預設為 0。

注釋:如果使用 "display: none",則無法重置計數器。如果使用 "visibility: hidden&程式設計客棧quot;,則可以重置計數器。

注釋:如果已規定 !doctype,那麼 internet explorer 8 (以及更高版本)支援 counter-reset 屬性。

counter-reset可能的opwdid值

none:預設。不能對選擇器的計數器進行重置。

id number:id 定義重置計數器的選擇器、id 或 class。number 可設定此選擇器出現次數的計數器的值。可以是正數、零或負數。

inherit:規定應該從父元素繼承 counter-reset:屬性的值。

關鍵就是它真的很簡單:在:before偽類裡的content屬性加入counter():

css code複製內容到剪貼簿

示例:css**:

css code複製內容到剪貼簿

html**:

xml/html code複製內容到剪貼簿

效果:本文標題: css計數器counter()的用法簡介

本文位址:

python 計數器類 Counter

在力扣刷了演算法題,看到有一題是 獨一無二的出現次數 給你乙個整數陣列 arr,請你幫忙統計陣列中每個數的出現次數。如果每個數的出現次數都是獨一無二的,就返回 true 否則返回 false。示例 1 輸入 arr 1 2,2 1,1 3 輸出 true 解釋 在該陣列中,1 出現了 3 次,2 出...

CSS的計數器

前端相容 11 19 當前位置 首頁 前端相容 正文 css counters其實就是一計數器,早期在css中計數器僅存在於ul和ol元素。如果要使用在div這樣的元素上,只能通過list style image或者是元素的backgroud image來實現。在 css2.1的規範 中介紹了一種新...

css計數器詳解

就是採用css給一些html元素自動生成編號,比如類似1.3.2這種,先看個效果 對,就是這種類似word裡面很常見的效果,如下 進風口的爽膚水 非進口商的 非進口商的 非進口商的 進風口的爽膚水 非進口商的 非進口商的 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 非進口...