CSS3 content属性学习

2019-09-13 郑州网站建设  

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的后面加上当前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=""><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.cnb日志s.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 {


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2095.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • 用来
  • :after
  • :b
  • Content