資訊專欄INFORMATION COLUMN
摘要：前面介紹過里的和這兩個偽元素，以及相關的用法，這篇將針對搭配計數器進行一些有趣的應用，相信熟練之后搞不好很好玩也說不定。使用語法計數器名稱，分隔字，了解原理之后，透過和的交互應用，就可以做出頗具特色的列表效果。
前面介紹過CSS里的::before和::after這兩個偽元素，以及content相關的用法，這篇將針對content搭配counter（計數器）進行一些有趣的應用，相信熟練之后搞不好很好玩也說不定。
counter基本用法在CSS里頭，counter是個很有意思的功能，最常見得就是如果我們使用list清單，樣式選擇decimal十進制，當清單變多的時候數字也會跟著增加，底層貌似就是使用counter來做的，也因為counter所產生的數值并不存在于網頁的元素內，所以如果我們要在清單元素之外使用，就必須透過::before或：：after的content來實現。
counter最的基本用法一定要有一個父元素和子元素（類似list的原理，使用ul包著li），所以長相會類似下面這段html：
鋼鐵人 美國隊長 雷神索爾
在CSS里頭，先針對div父元素使用counter-reset:num；進行計數器歸零的設置，里面num是計數器累加數值的變數，接著可以在span::before里面看到counter-increment:num；這一段，這段的作用是把num累加上去，預設數值為加1，接著就透過content顯示出來。
計數器預設的顯示語法為：counter（計數器名稱，list-style-type）
div{
counter-reset:num;
}
span{
display:block;
}
span::before{
counter-increment:num;
content:counter(num) ". ";
}
透過指定一開始counter-reset的起始數值，還有counter-increment累加的間隔數值，就可以做出從某個數值開始或只顯示偶數、奇數的效果。
div{
counter-reset:num 3;
}
span{
display:block;
}
span::before{
counter-increment:num 2;
content:counter(num) ". ";
}
如果要更換數字的樣式，也可以透過計數器的第二個設定值list-style-type來更改，下面的例子就是將樣式更改為georgian。
div{
counter-reset:num;
}
span{
display:block;
}
span::before{
counter-increment:num;
content:counter(num, georgian) ". ";
}
counter進階用法
除了指定單一個變數外，counter也可以同時指定多個變數，例如下面這段HTML，有三個類別在里面，我分別用span、i和b來分類。
鋼鐵人 美國隊長 雷神索爾 宙斯盾局 神鬼局 神經局 九頭蛇 九頭牛 九頭豬
CSS一開始counter-reset可以指定多個變數，透過一個空白字元分隔，如果空白字元后面接著數字則是起始值，沒有數字預設為0，當這樣設定之后，就可以看到不同類別的數字代號就不同。
如果遇到了巢狀結構，需要一層層的展開（例如：1 > 1.1 > 1.1.1），采用上述的作法可能就會復雜許多，好在counter還提供了另外一個counters的功能，目的就是來解決巢狀結構的麻煩事，在開始前可以先看看透過ul和li組合的清單長相：
傳統的清單如果將list-style設為decimal，同樣可以具備數字接續的功能，但相對來說要做一些特殊變化就辦不到了。
li{
list-style:decimal;
}
透過content和counters的搭配，我們就可以告別預設值的困擾，甚至可以在不使用清單ul和li的狀況下，實現和清單一模一樣的效果，舉例來說，我們純粹透過div模擬一個清單的長相（狀態仍然必須是有父元素和子元素的概念），里面的樣式b就等于是ul，樣式a就等于是li：
第一層第二層第三層第三層第三層第二層第二層第一層第二層第二層
由于b的外層沒有東西，所以一開始要把body和b都進行counter reset的動作，接著透過counters的使用，讓計數器的數值可以一個接著一個放進去，如此一來就可以做到原本清單不容易實現的效果了。
counters使用語法：counters（計數器名稱，分隔字，list-style-type）
body, .b{
counter-reset:c;
}
.a::before{
content:counters(c, ".") "：";
counter-increment:c;
}
div{
margin-left:10px;
}
了解原理之后，透過 ::before 和 ::after 的交互應用，就可以做出頗具特色的列表效果。
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;
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114484.html
摘要：偽元素被當做的樣式來進行展現，用法和普通的元素用法是一樣的。中的偽元素使用個冒號，在中，為了區分偽類和偽元素，規定偽元素使用個冒號。偽元素的特點優點不占用節點，減少節點數。不僅塊級元素可以設置偽元素，大部分行級元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時候，偽元素可以通過 css 給 HTML 添加一個元素（叫標簽也行），這個元素在文檔樹中是找不到的。偽元素被當做 CSS ...
摘要：前面介紹過里的和這兩個偽元素，以及相關的用法，這篇將針對搭配計數器進行一些有趣的應用，相信熟練之后搞不好很好玩也說不定。使用語法計數器名稱，分隔字，了解原理之后，透過和的交互應用，就可以做出頗具特色的列表效果。 前面介紹過CSS里的::before和::after這兩個偽元素，以及content相關的用法，這篇將針對content搭配counter（計數器）進行一些有趣的應用，相信熟練...
摘要：前言繼上篇魔法堂稍稍深入偽類選擇器記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦。和的注意事項默認必須設置屬性，否則一切都是無用功默認，就是和的內容無法被用戶選中的偽元素和偽類結合使用形如。 前言 ?繼上篇《CSS魔法堂：稍稍深入偽類選擇器》記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦^_^。本文講講述偽元素以及功能強大的Contet屬性，讓我們可以通過偽元素更好地實現更多的可能！ ...
摘要：狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。單冒號用于偽類，雙冒號用于偽元素?？梢酝ㄟ^對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。 css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
閱讀 466·2021-10-09 09:57
閱讀 470·2019-08-29 18:39
閱讀 810·2019-08-29 12:27
閱讀 3026·2019-08-26 11:38
閱讀 2667·2019-08-26 11:37
閱讀 1285·2019-08-26 10:59
閱讀 1376·2019-08-26 10:58
閱讀 989·2019-08-26 10:48
