成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

帶你了解css計數(shù)器——counters

fuyi501 / 3060人閱讀

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

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

當(dāng)時很好奇前面的行號是如何實現(xiàn)的，一探究竟原來非常簡單。

話不多說，先看代碼。

一段css代碼經(jīng)過替換后的HTML：

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

生成的html無非就是把不同的關(guān)鍵字用不同的span括起來，加上不同的樣式，從而顯示出不同的顏色，達到代碼高亮的效果。我們重點關(guān)注其行號是如何實現(xiàn)的，相關(guān)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;
}

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

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

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

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

codepen 實例

既然不知道，就還是來學(xué)習(xí)一下，一查才知道，這東西已經(jīng)出現(xiàn)很多年了，不是什么新鮮玩意。 還是自己無知呀，學(xué)無止境。

css-counter的幾個關(guān)鍵屬性正好就是上面實現(xiàn)行號所用到的三部曲。

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

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

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

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

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

效果如圖：

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

    
  
  • 
    一級標題1
    
      
      
    • 
        二級標題1
      
      • 
      
    • 
        二級標題2
      
      • 
    
    
  
    • 
  
  • 
    一級標題2
  
    • 
  
  • 
    一級標題3
    
      
      
    • 
        二級標題1
      
      • 
      
    • 
        二級標題2
      
      • 
    
    
  
    •

效果果如圖：

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


    
一級標題1
        

            
二級標題1

            
二級標題2
                

                    
三級標題1

                    
三級標題2

                    
三級標題3

                

            

            
二級標題3

        

    

    
一級標題2

    
一級標題3
        

            
二級標題1

效果：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116657.html

相關(guān)文章

  • 使用 CSS 計數(shù)器

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

    guqiu 評論0 收藏0

  • CSS偽元素（content與counter）

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

    wangzy2019 評論0 收藏0

  • CSS偽元素（content與counter）

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

    NervosNetwork 評論0 收藏0

  • 搞懂閉包

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

    masturbator 評論0 收藏0

  • css系列之before或after中content

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

    lieeps 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<