内容简介:css博大精深,很多属性,往往都是看似熟悉,但是似乎又不能将其特性和用法完整地说出来。content属性,的确是很眼熟,也许很多童鞋和我一样,和它初次见面,是在清除浮动的时候:如上所示,content 属性与 :before 及 :after 伪元素配合使用,并可以接受一个字符串作为值。
css博大精深,很多属性,往往都是看似熟悉,但是似乎又不能将其特性和用法完整地说出来。
content属性,的确是很眼熟,也许很多童鞋和我一样,和它初次见面,是在清除浮动的时候:
.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden } 复制代码
如上所示,content 属性与 :before 及 :after 伪元素配合使用,并可以接受一个字符串作为值。
然而,除了字符串之外,还能接受什么样的值呢?
定义和用法
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认是行内内容,不过可以用属性 display 控制。
参考:w3school
可能的值
none、normal、inherit、string、url()、attr()、[no-]open-quote、[no-]close-quote、counter[s]
其中none、normal、inherit这三个和大多数属性类似,故不做介绍。
string
string是常见的,上面清除浮动的例子,就是其中之一。
url()
url的用法,和background属性有点类似,可以接受一个图片url。不一样的是,content属性无法控制图片的大小。
<div class="logo">Google</div> .logo:before{ content: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png); } 复制代码
attr
attr,顾名思义,就是将content内容设置为对应元素的某一属性。
<p> <span data-text='半'>半</span> <span data-text='边'>边</span> <span data-text='效'>效</span> <span data-text='果'>果</span> </p> span{ font-size: 100px; font-weight: bold; position: relative; color: #000; } span:before{ content: attr(data-text); color: #F00; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; } 复制代码
quote · 引号
[no-]open-quote、[no-]close-quote,这四个值,常用于给元素前后加上引号,配合quotes 属性一起使用。
<p>鲁迅曾经说过: <span>能用CSS解决的问题就不要使用JS。<span>呵呵,谁说的?<span class="no-quote">呵呵,谁说的?</span></span></span></p> span { quotes: '“' '”' '‘' '’' '"' '"'; } span:before { content: open-quote; } span:after { content: close-quote; } .no-quote:after{ content: no-close-quote; } 复制代码
其中,quotes属性定义要使用的引号。两两一组,前两个值规定第一级引用嵌套,后两个值规定下一级引号嵌套。如此类推。
需要注意的是,只有当伪元素:before设置content的值为open-quote才会有效果。
counter[s] · 计数器
这是一个很强大的东西,不妨先来体验一下其强大的力量,查看示例
与其搭配使用的,还有counter-reset、counter-increment两个属性。
counter-reset
用来标识计数器的作用域,值包括两部分:第一部分为计数器的名字;第二部分为计数器的起始值,默认为0。此外,counter-reset还可以同时声明多个计数器
counter-reset: n 0 counter-reset: n 2 counter-reset: n 0 m 0 p 0 复制代码
counter-increment
用来表明计数器实际用到的范围,值包括两部分:第一部分为计数器的名字;第二部分为计数器的递增的值,默认为1。如:
counter-increment: n 2 counter-increment: n -1 /*递减*/ 复制代码
那counter和counters有什么不一样呢?
counter()
counter方法可以接收两个参数。第一个是计数器的名字,必填;第二个是计数器的样式,也就是list-style-type,其支持的关键字值,就是list-style-type支持的那些值,比如disc | circle | square之类等等。
content: counter(n) content: counter(m, circle) 复制代码
counters()
counters方法主要用于嵌套计数,可以接收三个参数。第一个是计数器的名字,必填;第二个是字符串,用于嵌套计数的分隔符,如1.1中的“.”;第三个参数是计数器的样式,与counter一样。其中,前两个参数为必填
content: counters(n, '-'); 复制代码
说了这么多,还是查看示例吧
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 数组对象根据对象中指定的属性去重?你知道多少
- 项目文件中的已知属性(知道了这些,就不会随便在 csproj 中写死常量啦)
- CSS 属性篇(七):Display属性
- JavaScript对象之数据属性与访问器属性
- Logback file属性 与 fileNamePattern属性的关系
- 浅谈Spring Boot 属性配置和自定义属性配置
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。