亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

fuyi501 / 3150人閱讀

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

第一次了解到這個(gè)css是因?yàn)榇a高亮-prismj中行號(hào)顯示的實(shí)現(xiàn)。

當(dāng)時(shí)很好奇前面的行號(hào)是如何實(shí)現(xiàn)的，一探究竟原來(lái)非常簡(jiǎn)單。

話不多說(shuō)，先看代碼。

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

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

生成的html無(wú)非就是把不同的關(guān)鍵字用不同的span括起來(lái)，加上不同的樣式，從而顯示出不同的顏色，達(dá)到代碼高亮的效果。我們重點(diǎn)關(guān)注其行號(hào)是如何實(shí)現(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代碼看起來(lái)多，實(shí)則不然，核心部分就三句：

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

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

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

codepen 實(shí)例

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

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

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

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

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

我們實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的例子吧，給ul列表加上序號(hào)。

    
  
  • 列表?xiàng)l目1
    • 
  
  • 列表?xiàng)l目2
    • 
  
  • 列表?xiàng)l目3
    • 
  
  • 列表?xiàng)l目4
    • 
  
  • 列表?xiàng)l目5
    •

效果如圖：

挺簡(jiǎn)單嘛，論文或者各種文檔中需要將標(biāo)題標(biāo)為1-1、1-1-1的形式是不是也可以用這個(gè)做呢，我們一起來(lái)試試。

    
  
  • 
    一級(jí)標(biāo)題1
    
      
      
    • 
        二級(jí)標(biāo)題1
      
      • 
      
    • 
        二級(jí)標(biāo)題2
      
      • 
    
    
  
    • 
  
  • 
    一級(jí)標(biāo)題2
  
    • 
  
  • 
    一級(jí)標(biāo)題3
    
      
      
    • 
        二級(jí)標(biāo)題1
      
      • 
      
    • 
        二級(jí)標(biāo)題2
      
      • 
    
    
  
    •

效果果如圖：

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


    
一級(jí)標(biāo)題1
        

            
二級(jí)標(biāo)題1

            
二級(jí)標(biāo)題2
                

                    
三級(jí)標(biāo)題1

                    
三級(jí)標(biāo)題2

                    
三級(jí)標(biāo)題3

                

            

            
二級(jí)標(biāo)題3

        

    

    
一級(jí)標(biāo)題2

    
一級(jí)標(biāo)題3
        

            
二級(jí)標(biāo)題1

效果：

一樣的效果代碼是不是簡(jiǎn)單了不少呢？

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116657.html

相關(guān)文章

  • 使用 CSS 計(jì)數(shù)器

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

    guqiu 評(píng)論0 收藏0

  • CSS偽元素（content與counter）

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

    wangzy2019 評(píng)論0 收藏0

  • CSS偽元素（content與counter）

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

    NervosNetwork 評(píng)論0 收藏0

  • 搞懂閉包

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

    masturbator 評(píng)論0 收藏0

  • css系列之before或after中content

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

    lieeps 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<