CSS屬性之計數器相關

標籤：標記   遵從   -o   元素   attr   屬性   多個   視頻   type屬性   

一、內容 content
用來和:after及:before虛擬元素一起使用，在對象前或後顯示內容。
1、normal
預設值，表現與none值相同。
2、none
不產生任何值。
3、<attr>
插入標籤屬性值。

a:after{  content: attr(href);}

4、<url>
使用指定的絕對或相對位址插入一個外部資源（映像，聲頻，視頻或瀏覽器支援的其他任何資源）。

h3:after{  content: url(http://www.baidu.com/imgs/new.png);}

5、<string>
插入字串。

h1:after{  content: "h1後插入內容";}

6、counter(name)
使用已命名的計數器。

h1:before{  content:counter(my)‘、‘;}h1{  counter-increment:my;}

7、counter(name,list-style-type)
使用已命名的計數器並遵從指定的list-style-type屬性。

h1:before{  content:counter(my,upper-alpha);  color:red;  font-size:20px;}h1{  counter-increment:my;}

8、counters(name,string)
使用所有已命名的計數器。

h1:before{  content:‘第‘counter(my)‘章‘;  color:red;  font-size:20px;}h1{  counter-increment:my;}

9、counters(name,string,list-style-type)
使用所有已命名的計數器並遵從指定的list-style-type屬性。
10、no-close-quote
並不插入quotes屬性的後標記，但增加其嵌套層級。
11、no-open-quote
並不插入quotes屬性的前標記，但減少其嵌套層級。
12、close-quote
插入quotes屬性的後標記。
13、open-quote
插入quotes屬性的前標記。

h1{  quotes:"(" ")";  /*利用元素的quotes屬性指定文字元號*/}h1::before{  content:open-quote;}h1::after{  content:close-quote;}h2{  quotes:"\"" "\"";  /*添加雙引號要轉義*/}h2::before{  content:open-quote;}h2::after{  content:close-quote;}

二、計數器 counter-increment
1、none
阻止計數器增加。
2、<identifier>
identifier定義一個或多個將被增加的selector，id，或者class。
3、<integer>
定義計算機每次增加的數值，可以為負值，預設值是1。

.counter1 li {    counter-increment: cname;}.counter1 li:before {    content: counter(cname)".";}.counter2 li {    counter-increment: cname2 2;}.counter2 li:before {    content: counter(cname2)".";}.counter3 li {    counter-increment: cname3 -1;}.counter3 li:before {    content: counter(cname3)".";}

三、計數器重設 counter-reset
1、none
阻止計算機複位。
2、<identifier>
identifier定義一個或多個將被增加的selector，id，或者class。
3、<integer>
定義被複位的數值，可以為負值，預設值是0。

.counter1 li {    counter-increment: cname;}.counter1 li:before {    content: counter(cname)".";    counter-reset: cname;}.counter2 li {    counter-increment: cname2;}.counter2 li:before {    content: counter(cname2)".";    counter-reset: cname2 20;}.counter3 li {    counter-increment: cname3;}.counter3 li:before {    content: counter(cname3)".";    counter-reset: cname3 -1;}

四、引用 quotes
1、none
content屬性的open-quote和close-quote值將不會產生任何標記。
2、<string>
定義content屬性的open-quote和close-quote值的標記，2個為一組。

h1{  quotes:"(" ")";  /*利用元素的quotes屬性指定文字元號*/}h1::before{  content:open-quote;}h1::after{  content:close-quote;}

css計算機：http://www.zhangxinxu.com/study/201412/css-counters-number-game.html
css計數器：http://www.zhangxinxu.com/study/201412/css-counters-get-checked-number.html

CSS屬性之計數器相關