温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3中如何使用content属性

发布时间:2022-03-01 14:41:03 来源:亿速云 阅读:194 作者:小新 栏目:web开发

小编给大家分享一下CSS3中如何使用content属性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

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>这个是A计划</li>

<li>这个是A计划</li>

<li>这个是A计划</li>

<li>这个是A计划</li>

<li>这个是A计划</li></ul>

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

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>

以上是“CSS3中如何使用content属性”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI