标签:标记 遵从 -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
标签:标记 遵从 -o 元素 attr 属性 多个 视频 type属性
原文地址:http://www.cnblogs.com/camille666/p/css_property.html