欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >
SSI ļʱ

CSS3 content属性学习

 

css3中出现了 ":before",":after"伪类,

你可以这样写:

h1:after{

content:'h1后插入的文本';

...}

这两个选择器的作用以及效果,这里就不在介绍了;主要说一下上面提到的一个css属性content用来和:after:before伪元素一起使用,在对象前或后显示内容。

content的取值:

normal:默认值。表现与none值相同

none:不生成任何值。<attr>:插入标签属性值<url>:使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)<string>:插入字符串

counter(name):使用已命名的计数器

counter(name,list-style-type):使用已命名的计数器并遵从指定的list-style-type属性

counters(name,string):使用所有已命名的计数器

counters(name,string,list-style-type):使用所有已命名的计数器并遵从指定的list-style-type属性

no-close-quote:并不插入quotes属性的后标记。但增加其嵌套级别

no-open-quote:并不插入quotes属性的前标记。但减少其嵌套级别

close-quote:插入quotes属性的后标记

open-quote:插入quotes属性的前标记

这里比较不好理解的取值就是:counter(name)这些;

下面主要总结一下这块,最后会给出各个取值的demo

比如我有如下html结构:

<ul>

<li>这个是有序列表</li>

<li>这个是有序列表</li>

<li>这个是有序列表</li>

<li>这个是有序列表</li>

<li>这个是有序列表</li></ul>

我要在每个li的后面加上当前li index值:

ul li{

counter-increment:index;

}

ul li:after{

content:'统计:'counter(index);

display:block;

line-height:35px;

}

解释:

count(name)这里的name,必须要提前指定好,否则所有的值都将是0

count(name,list-style-type)这里的list-style-type就是csslist-style-type属性的取值;

下面给出完整DEMO

<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS content</title><meta name="author" content="phpstudy.net"><meta name="copyright" content="www.phpstudy.net"><style>

.string p:after {

margin-left: -16px;

background: #fff;

content: "支持";

color: #f00;}

.attr p:after {

content: attr(title);}

.url p:before {

content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png);

display: block;}

.test ol {

margin: 16px 0;

padding: 0;

list-style: none;}

.counter1 li {

counter-increment: testname;}

.counter1 li:before {

content: counter(testname)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter2 li {

counter-increment: testname2;}

.counter2 li:before {

content: counter(testname2,lower-roman)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter3 ol ol {

margin: 0 0 0 28px;}

.counter3 li {

padding: 2px 0;

counter-increment: testname3;}

.counter3 li:before {

content: counter(testname3,float)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter3 li li {

counter-increment: testname4;}

.counter3 li li:before {

content: counter(testname3,decimal)"."counter(testname4,decimal)":";}

.counter3 li li li {

counter-increment: testname5;}

.counter3 li li li:before {

content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";}</style></head><body><ul>

<li>

<strong>string</strong>

<p>你的浏览器是否支持content属性:否</p>

</li>

<li>

<strong>attr</strong>

<p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p>

</li>

<li>

<strong>url()</strong>

<p>如果你看到我的头像图片则说明你目前使用的浏览器支持content属性</p>

</li>

<li>

<strong>counter(name)</strong>

<ol>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ol>

</li>

<li>

<strong>counter(name,list-style-type)</strong>

<ol>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ol>

</li>

<li>

<strong>counter(name)拓展应用:</strong>

<ol>

<li>列表项

<ol>

<li>列表项

<ol>

<li>列表项</li>

<li>列表项</li>

</ol>

</li>

<li>列表项</li>

</ol>

</li>

<li>列表项

<ol>

<li>列表项</li>

<li>列表项</li>

</ol>

</li>

<li>列表项

<ol>

<li>列表项</li>

<li>列表项</li>

</ol>

</li>

</ol>

</li></ul></body></html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c23889.shtml

我要分享到:
上一篇:深入学习css3动画属性Transition
下一篇:没有了

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-04-19 12:06 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。