开发者社区> 华章计算机> 正文

《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 20.3 使用content属性来插入项目编号

简介: 本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第20章 ,第20.3节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
+关注继续查看

20.3 使用content属性来插入项目编号

前面两节中分别介绍了利用before选择器与after选择器的content属性在元素的前面或后面插入文字与图像的方法,本节介绍当页面中具有多个项目时如何利用这个content属性来在项目前插入项目编号,在本节的最后介绍一下如何利用这个content属性在字符串两边加上括号。

到目前为止,Firefox、Chrome、Safari、Opera浏览器均支持插入项目编号的功能,在Internet Explorer中从IE8开始支持这个功能。

20.3.1 在多个标题前加上连续编号

在content属性中使用counter属性值来针对多个项目追加连续编号,使用方法如下所示。
<元素>:before{

content:counter(计数器名);

}
使用计数器来计算编号,计数器可任意命名。
另外,还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中所指定的计数器名。代码如下所示。
<元素>{

counter-increment:before选择器或after选择器中指定的计数器名

}
接下来,我们在代码清单20-6中看一个对多个项目追加连续编号的示例,在该示例中具有多个标题,使用before选择器对这些标题追加连续编号。


image
image

这部分代码的运行结果如图20-7所示。

20.3.2 在项目编号中追加文字

可以在插入的项目编号中加入文字,使项目编号变成类似“第1章”之类的带文字的编号。

针对代码清单20-6,只要将before选择器中的代码修改为如下所示的代码就可以了。

h1:before{
content: '第'counter(mycounter)'章';
}
将代码清单20-6中before选择器中的代码用上面这段代码进行替代,然后重新运行该示例,运行结果如图20-8所示。

image

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android开发13——内容提供者ContentProvider的基本使用
  一、ContentProvider简介 当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据。ContentProvider为存储和获取数据提供了统一的接口。虽然使用其他方法也可以对外共享数据,但数据访问方式会因数据存储的方式而不同,如采用文件方式对外共享数据,需要进行文件操作读写数据;采用sharedpreferences
960 0
使用IntelliJ IDEA 14和Maven创建java web项目
原文:使用IntelliJ IDEA 14和Maven创建java web项目 http://mark.leanote.com/post/%E4%BD%BF%E7%94%A8IntelliJ-IDEA-14%E5%92%8CMaven%E5%88%9B%E5%BB%BAjava-web%E9%A1%B9%E7%9B%AE 安装Maven 下载安装 去maven官网下载最新版。
1330 0
艾伟也谈项目管理,ERP项目实施要未雨绸缪不要亡羊补牢
  在ERP项目中,要做到在项目实施的未雨绸缪,不会出现亡羊补牢的情况就需要项目管理和实施人员在项目推进过程中队下面的阶段进行预测,把握好发展的趋势,掌握项目的主动权。下面就提出一些建议,供大家讨论。希望对大家有用。
790 0
Visual Studio 2010 起始页中 不显示最近使用的项目问题,解决办法
最近新装了vs2010,发现打开vs2010 后 起始页面中的最近使用的栏目中 并未显示最近加载的项目 解决办法如下: 运行 regedit 打开下面的键值: HKEY_CURRENT_USER/Software/Microsoft/Windows/CurrentVersion/Policie...
510 0
10059
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载