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

資訊專(zhuān)欄INFORMATION COLUMN

CSS偽元素（content與counter）

wangzy2019 / 762人閱讀

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

前面介紹過(guò)CSS里的::before和::after這兩個(gè)偽元素，以及content相關(guān)的用法，這篇將針對(duì)content搭配counter（計(jì)數(shù)器）進(jìn)行一些有趣的應(yīng)用，相信熟練之后搞不好很好玩也說(shuō)不定。

counter基本用法

在CSS里頭，counter是個(gè)很有意思的功能，最常見(jiàn)得就是如果我們使用list清單，樣式選擇decimal十進(jìn)制，當(dāng)清單變多的時(shí)候數(shù)字也會(huì)跟著增加，底層貌似就是使用counter來(lái)做的，也因?yàn)閏ounter所產(chǎn)生的數(shù)值并不存在于網(wǎng)頁(yè)的元素內(nèi)，所以如果我們要在清單元素之外使用，就必須透過(guò)::before或：：after的content來(lái)實(shí)現(xiàn)。

counter最的基本用法一定要有一個(gè)父元素和子元素（類(lèi)似list的原理，使用ul包著li），所以長(zhǎng)相會(huì)類(lèi)似下面這段html：


    鋼鐵人
    美國(guó)隊(duì)長(zhǎng)
    雷神索爾

在CSS里頭，先針對(duì)div父元素使用counter-reset:num；進(jìn)行計(jì)數(shù)器歸零的設(shè)置，里面num是計(jì)數(shù)器累加數(shù)值的變數(shù)，接著可以在span::before里面看到counter-increment:num；這一段，這段的作用是把num累加上去，預(yù)設(shè)數(shù)值為加1，接著就透過(guò)content顯示出來(lái)。

計(jì)數(shù)器預(yù)設(shè)的顯示語(yǔ)法為：counter（計(jì)數(shù)器名稱(chēng)，list-style-type）
div{
  counter-reset:num;
}
span{
  display:block;
}
span::before{
  counter-increment:num; 
  content:counter(num) ". ";
}

透過(guò)指定一開(kāi)始counter-reset的起始數(shù)值，還有counter-increment累加的間隔數(shù)值，就可以做出從某個(gè)數(shù)值開(kāi)始或只顯示偶數(shù)、奇數(shù)的效果。

div{
  counter-reset:num 3;
}
span{
  display:block;
}
span::before{
  counter-increment:num 2; 
  content:counter(num) ". ";
}

如果要更換數(shù)字的樣式，也可以透過(guò)計(jì)數(shù)器的第二個(gè)設(shè)定值list-style-type來(lái)更改，下面的例子就是將樣式更改為georgian。

div{
  counter-reset:num;
}
span{
  display:block;
}
span::before{
  counter-increment:num; 
  content:counter(num, georgian) ". ";
}

counter進(jìn)階用法

除了指定單一個(gè)變數(shù)外，counter也可以同時(shí)指定多個(gè)變數(shù)，例如下面這段HTML，有三個(gè)類(lèi)別在里面，我分別用span、i和b來(lái)分類(lèi)。


  鋼鐵人
  美國(guó)隊(duì)長(zhǎng)
  雷神索爾
  宙斯盾局
  神鬼局
  神經(jīng)局
  九頭蛇
  九頭牛
  九頭豬

CSS一開(kāi)始counter-reset可以指定多個(gè)變數(shù)，透過(guò)一個(gè)空白字元分隔，如果空白字元后面接著數(shù)字則是起始值，沒(méi)有數(shù)字預(yù)設(shè)為0，當(dāng)這樣設(shè)定之后，就可以看到不同類(lèi)別的數(shù)字代號(hào)就不同。

如果遇到了巢狀結(jié)構(gòu)，需要一層層的展開(kāi)（例如：1 > 1.1 > 1.1.1），采用上述的作法可能就會(huì)復(fù)雜許多，好在counter還提供了另外一個(gè)counters的功能，目的就是來(lái)解決巢狀結(jié)構(gòu)的麻煩事，在開(kāi)始前可以先看看透過(guò)ul和li組合的清單長(zhǎng)相：

    
  
  • 第一層
    
      
      
    • 第二層
        
        
          
      • 第三層
        • 
          
      • 第三層
        • 
          
      • 第三層
        • 
        
      
      
      • 
      
    • 第二層
      • 
      
    • 第二層
      • 
    
    
  
    • 
  
  • 第一層
    • 
  
      
    
    • 第二層
      • 
    
    • 第二層
      •

傳統(tǒng)的清單如果將list-style設(shè)為decimal，同樣可以具備數(shù)字接續(xù)的功能，但相對(duì)來(lái)說(shuō)要做一些特殊變化就辦不到了。

li{
  list-style:decimal;
}

透過(guò)content和counters的搭配，我們就可以告別預(yù)設(shè)值的困擾，甚至可以在不使用清單ul和li的狀況下，實(shí)現(xiàn)和清單一模一樣的效果，舉例來(lái)說(shuō)，我們純粹透過(guò)div模擬一個(gè)清單的長(zhǎng)相（狀態(tài)仍然必須是有父元素和子元素的概念），里面的樣式b就等于是ul，樣式a就等于是li：

第一層
  

    
第二層
      

        
第三層

        
第三層

        
第三層

      

    

    
第二層

    
第二層

  




第一層
  

    
第二層

    
第二層

由于b的外層沒(méi)有東西，所以一開(kāi)始要把body和b都進(jìn)行counter reset的動(dòng)作，接著透過(guò)counters的使用，讓計(jì)數(shù)器的數(shù)值可以一個(gè)接著一個(gè)放進(jìn)去，如此一來(lái)就可以做到原本清單不容易實(shí)現(xiàn)的效果了。

counters使用語(yǔ)法：counters（計(jì)數(shù)器名稱(chēng)，分隔字，list-style-type）
body, .b{
  counter-reset:c;
}
.a::before{
  content:counters(c, ".") "：";
  counter-increment:c; 
}
div{
  margin-left:10px;
}


了解原理之后，透過(guò) ::before 和 ::after 的交互應(yīng)用，就可以做出頗具特色的列表效果。

body, .b{
  counter-reset:c;
}
.a{
  box-sizing:border-box;
  position:relative;
  line-height:40px;
}

.a .a{
  padding-left:30px;
}

.a::after{
  content:"";
  box-sizing:border-box;
  display:inline-block;
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  height:40px;
  margin-left:30px;
  box-shadow:inset 0 2px #666;
  background:#eee;
}
.a::before{
  content:counter(c, upper-roman);
  counter-increment:c;
  display:inline-block;
  width:30px;
  height:40px;
  background:#666;
  color:#fff;
  text-align:center;
  margin-right:5px;
}

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

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

相關(guān)文章

  • 偽元素 ::after 和 ::before 應(yīng)該這么用（一）

    摘要：偽元素被當(dāng)做的樣式來(lái)進(jìn)行展現(xiàn)，用法和普通的元素用法是一樣的。中的偽元素使用個(gè)冒號(hào)，在中，為了區(qū)分偽類(lèi)和偽元素，規(guī)定偽元素使用個(gè)冒號(hào)。偽元素的特點(diǎn)優(yōu)點(diǎn)不占用節(jié)點(diǎn)，減少節(jié)點(diǎn)數(shù)。不僅塊級(jí)元素可以設(shè)置偽元素，大部分行級(jí)元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時(shí)候，偽元素可以通過(guò) css 給 HTML 添加一個(gè)元素（叫標(biāo)簽也行），這個(gè)元素在文檔樹(shù)中是找不到的。偽元素被當(dāng)做 CSS ...

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

  • CSS偽元素（content與counter）

    摘要：前面介紹過(guò)里的和這兩個(gè)偽元素，以及相關(guān)的用法，這篇將針對(duì)搭配計(jì)數(shù)器進(jìn)行一些有趣的應(yīng)用，相信熟練之后搞不好很好玩也說(shuō)不定。使用語(yǔ)法計(jì)數(shù)器名稱(chēng)，分隔字，了解原理之后，透過(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

  • CSS魔法堂：一起玩透偽元素和Content屬性

    摘要：前言繼上篇魔法堂稍稍深入偽類(lèi)選擇器記錄完偽類(lèi)后，我自然而然要向偽元素伸出魔掌的啦。和的注意事項(xiàng)默認(rèn)必須設(shè)置屬性，否則一切都是無(wú)用功默認(rèn)，就是和的內(nèi)容無(wú)法被用戶(hù)選中的偽元素和偽類(lèi)結(jié)合使用形如。 前言 ?繼上篇《CSS魔法堂：稍稍深入偽類(lèi)選擇器》記錄完偽類(lèi)后，我自然而然要向偽元素伸出魔掌的啦^_^。本文講講述偽元素以及功能強(qiáng)大的Contet屬性，讓我們可以通過(guò)偽元素更好地實(shí)現(xiàn)更多的可能！ ...

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

  • 談?wù)?em>css偽類(lèi)與偽元素

    摘要：狀態(tài)偽類(lèi)是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶(hù)的交互過(guò)程中元素的狀態(tài)是動(dòng)態(tài)變化的，因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號(hào)用于偽類(lèi)，雙冒號(hào)用于偽元素。可以通過(guò)對(duì)父元素添加偽類(lèi)撐開(kāi)父元素高度，因?yàn)榫褪瞧渥詈笠粋€(gè)子元素。 css選擇器常見(jiàn)包括id（#id）、標(biāo)簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類(lèi)選擇器。正確的利用偽元素和偽類(lèi)能...

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

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

0條評(píng)論

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