帶你了解css計數器——counters

fuyi501 發布于2019-08-30 15:53 / 3036人閱讀

摘要：語法格式，中的是和中元素所支持的的值，也就是你可以將顯示為羅馬數字則是表示可以使用指定的字符串將計數器連接起來。

第一次了解到這個css是因為代碼高亮-prismj中行號顯示的實現。

當時很好奇前面的行號是如何實現的，一探究竟原來非常簡單。

話不多說，先看代碼。

一段css代碼經過替換后的HTML：

pre.line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}

生成的html無非就是把不同的關鍵字用不同的span括起來，加上不同的樣式，從而顯示出不同的顏色，達到代碼高亮的效果。我們重點關注其行號是如何實現的，相關css代碼如下：

pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}
.line-numbers .line-numbers-rows {
  font-size: 100%;
  position: absolute;
  top: 0;
  left: -3.8em;
  width: 3em;
  user-select: none;
  letter-spacing: -1px;
  pointer-events: none;
  border-right: 1px solid #999;
}
.line-numbers-rows>span {
  display: block;
  counter-increment: linenumber;
}
.line-numbers-rows>span:before {
  display: block;
  padding-right: .8em;
  content: counter(linenumber);
  text-align: right;
  color: #999;
}

就能顯示為如上所示的結構，css代碼看起來多，實則不然，核心部分就三句：

遇到 line-numbers 時 counter-reset: linenumber; 作用是重置名稱為linenumber的計數器。

遇到 .line-numbers-rows>span 時 counter-increment: linenumber; 作用是此時名稱為linenumber的計數器進行遞增。

在 line-numbers-rows>span 中創建一個偽元素，設置其content 為 counter(linenumber) ，也就是在這個偽元素中顯示這個計數器

codepen 實例

既然不知道，就還是來學習一下，一查才知道，這東西已經出現很多年了，不是什么新鮮玩意。還是自己無知呀，學無止境。

css-counter的幾個關鍵屬性正好就是上面實現行號所用到的三部曲。

counter-reset ：必需值，必須用于選擇器，主要用來標識該作用域，其值可以自定義。值語法為 counter-reset: identifier [integer ] ，其中的 identifier 即為計數器的名稱，第二值 integer 為計數器的初始值，默認為0，可接受任意整數值，默認為0，可省略。另外還可以一次定義多個,如 counter-reset: counter1 -10 counter1 10。

counter-increment ：作用是遇到這個選擇器匹配的元素時，計數器進行遞增。語法格式為 counter-increment:identifier [integer]，identifier 為計時器名稱，integer為一個整數值，表示每次遞增的值（負數則為遞減），默認為1，可省略。

counter()/counters() : 這個實際是個方法，可理解為獲取計數器的值。通常將其作為偽元素的 content 屬性，從而將值顯示出來。語法格式 counter(name, style) / counters(name, string) ，counter 中的 style 是ul和ol中li元素所支持的list-style-type 的值，也就是你可以將 1 顯示為羅馬數字 i ；counters 則是表示可以使用指定的字符串將計數器連接起來。

我們實現一個最簡單的例子吧，給ul列表加上序號。


  列表條目1
  列表條目2
  列表條目3
  列表條目4
  列表條目5

效果如圖：

挺簡單嘛，論文或者各種文檔中需要將標題標為1-1、1-1-1的形式是不是也可以用這個做呢，我們一起來試試。

效果果如圖：

能實現，但是略顯麻煩對不對。對于這種需要嵌套的使用 counters 就會變得方便很多。

效果：

一樣的效果代碼是不是簡單了不少呢？

GPU云服務器云服務器 counters counter 帶你學c帶你飛帶你搭建阿里云服務器系統

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116657.html

使用 CSS 計數器

摘要：使用計數器計數器本質上是維護的變量，這些變量可以根據規則增加以跟蹤使用次數。有網友利用計數器制作文檔的列表序號排序，也有網友利用計數器偽類元素制作更華麗的效果。使用計數器語法命名變量并定義計數器的值，默認為。注意計數器只跟屬性使用才有效。使用 CSS 計數器 CSS 計數器本質上是 CSS 維護的變量，這些變量可以根據 CSS 規則增加以跟蹤使用次數。那么關于 CSS 計數器的使用...

guqiu 2019-08-30 14:14 評論0 收藏0
CSS偽元素（content與counter）

摘要：前面介紹過里的和這兩個偽元素，以及相關的用法，這篇將針對搭配計數器進行一些有趣的應用，相信熟練之后搞不好很好玩也說不定。使用語法計數器名稱，分隔字，了解原理之后，透過和的交互應用，就可以做出頗具特色的列表效果。前面介紹過CSS里的::before和::after這兩個偽元素，以及content相關的用法，這篇將針對content搭配counter（計數器）進行一些有趣的應用，相信熟練...

wangzy2019 2019-08-02 16:13 評論0 收藏0
CSS偽元素（content與counter）

摘要：前面介紹過里的和這兩個偽元素，以及相關的用法，這篇將針對搭配計數器進行一些有趣的應用，相信熟練之后搞不好很好玩也說不定。使用語法計數器名稱，分隔字，了解原理之后，透過和的交互應用，就可以做出頗具特色的列表效果。前面介紹過CSS里的::before和::after這兩個偽元素，以及content相關的用法，這篇將針對content搭配counter（計數器）進行一些有趣的應用，相信熟練...

NervosNetwork 2019-08-29 18:39 評論0 收藏0
搞懂閉包

摘要：此時閉包函數的作用域鏈得以保存，不會被垃圾回收機制所回收。執行執行完畢，返回總結閉包的原理，就是把閉包函數的作用域鏈保存了下來。原文：搞懂閉包 | AlloyTeam作者：TAT.yaoyao 閉包這個概念是前端工程師必須要深刻理解的，但是網上確實有一些文章會讓初學者覺得晦澀難懂，而且閉包的文章描述不一。本文面向初級的程序員，聊一聊我對閉包的理解。當然如果你看到閉包聯想不到作用域鏈...

masturbator 2019-08-26 10:14 評論0 收藏0
css系列之before或after中content

摘要：要配合和屬性使用。，給同級元素增加計數器用于標識自增計數器的作用范圍，為自定義名稱，為起始編號默認為。 **單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素，不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，比如:first-line、:first-letter、:before、:after等，單冒號(:)兼容性更好** content可能的值 div::after{ ...

lieeps 2019-08-30 15:55 評論0 收藏0