counter-reset、counter()和counter-increment用法

antzone發表於2017-04-10
REM

標題中的三個css屬性或者方法經常用於能夠自動進行編號的列表或者類似的其他功能。

下面就通過程式碼例項介紹一下它們的作用，這裡並不具體到每一個細節，而是從巨集觀上去理解它們，細枝末節可以自行查詢。

現在的css有一點點程式語言的味道，標題中的三個屬性或者方法如果從程式語言的角度來理解則更為容易。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul{
  counter-reset:antzone;
}
ul li{list-style-type:none;}
ul li{counter-increment:antzone;}
ul li:before{
  content:counter(antzone)".";
  color:red;
}
</style>
</head>
<body>
<ul>
  <li>本站的url地址是www.softwhy.com。</li>
  <li>只有努力奮鬥才會有美好的未來。</li>
  <li>每一天都是新的，要好好珍惜。</li>
  <li>沒有人一開始就是高手，必須要通過努力。</li>
</ul>
</body>
</html>

上面是一個簡單的給li元素列表編號的功能，下面就以程式語言的角度來介紹一下。

counter-reset可以認為是宣告一個變數，這個變數的作用域就是，宣告所在元素和下面所有的子元素。

變數antzone的預設值是0，也可以是負數，例如:

[CSS] 純文字檢視 複製程式碼
counter-reset:antzone -1;

上面程式碼宣告一個變數antzone，並賦值為-1。

counter-increment的作用是對變數設定遞增的幅度，預設值是1,程式碼如下:

[CSS] 純文字檢視 複製程式碼
counter-increment:antzone 2

規定每一次遍歷到選擇器匹配的元素，變數值增加2。

counter()就是用來計算變數的值，程式碼如下:

[CSS] 純文字檢視 複製程式碼
counter(antzone)

相關文章