码迷,mamicode.com
首页 > Web开发 > 详细

CSS属性之计数器相关

时间:2017-08-23 18:19:48      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:标记   遵从   -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属性之计数器相关

标签:标记   遵从   -o   元素   attr   属性   多个   视频   type属性   

原文地址:http://www.cnblogs.com/camille666/p/css_property.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!