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

資訊專欄INFORMATION COLUMN

CSS偽元素（content與counter）

NervosNetwork / 485人閱讀

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

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

counter基本用法

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

counter最的基本用法一定要有一個父元素和子元素（類似list的原理，使用ul包著li），所以長相會類似下面這段html：


    鋼鐵人
    美國隊長
    雷神索爾

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

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

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

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

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

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

counter進階用法

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


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

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

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

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

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

li{
  list-style:decimal;
}

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

第一層
  

    
第二層
      

        
第三層

        
第三層

        
第三層

      

    

    
第二層

    
第二層

  




第一層
  

    
第二層

    
第二層

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

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


了解原理之后，透過 ::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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    BlackMass 評論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屬性

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

    DevTalking 評論0 收藏0

  • 談?wù)?em>css偽類與偽元素

    摘要：狀態(tài)偽類是基于元素當前狀態(tài)進行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號用于偽類，雙冒號用于偽元素?？梢酝ㄟ^對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。 css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

    Berwin 評論0 收藏0

發(fā)表評論

0條評論

NervosNetwork

男|高級講師

TA的文章

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