《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 20.1.2 指定个别元素不进行插入

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

20.1.2 指定个别元素不进行插入

在代码清单20-1的示例中,因为对页面上的h2元素使用了before选择器,所以该页面上如果有多个h2元素,则所有的h2元素前面都会被插入内容。如果想让其中一个或几个h2元素的前面不要插入内容时,应该怎么指定呢?

在CSS 2.1中,针对这个问题在content属性中追加了一个none属性值,使用方法如下代码所示。

image

通过这种方法,替h2元素增加一个类,然后替这个类起个名字,在这个类的样式指定中将content属性值设定为“none”,然后在不需要插入内容的元素中将class属性的属性值设定为这个给定的类名就可以了。
代码清单20-2为将代码清单20-1修改后使用none属性值的示例,该页面中有三个h2元素,其中第二个h2元素前面没有被插入内容。


image
image

这段代码的运行结果如图20-2所示。

image

另外,在CSS 2.1中,除了none属性值外,还为content属性添加了一个“normal”属性值,其作用与使用方法none属性值的作用相同,并且使用方法也相同,读者可自行在代码清单20-2中,将none属性值修改为normal属性值,然后在浏览器中重新运行该示例,观察运行结果。

那么,既然normal属性值的作用与none属性值的作用相同,为什么CSS 3中还要追加这个normal属性值呢?它们的区别又是什么呢?这里要补充说明的是,从CSS 2.1开始,只有当使用before选择器与after选择器的时候,normal属性值的作用才与none属性值的作用相同,都是不让选择器在个别元素的前面或后面插入内容。但是none属性值只能应用在这两个选择器中,而normal属性值还可以应用在其他用来插入内容的选择器中,而在CSS 2中,只有before选择器与after选择器能够用来在元素的前面或后面插入内容,所以这两者的作用完全相同。在CSS 3草案中,已经追加了其他一些可以用来插入内容的选择器的提案,针对这一类选择器,就只能使用normal属性值了,而且normal属性值的作用也会根据选择器的不同而发生变化。

相关文章
|
21天前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
21天前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
21天前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
21天前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
21天前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
21天前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
21天前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
21天前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
21天前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
10月前
|
移动开发 JavaScript 前端开发
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
本文介绍了在Twaver HTML5中如何设置告警元素(Alarm)的位置,包括Node和Link网元的告警位置偏移量以及定位理解。通过示例代码展示了如何在不同类型网元上设置告警位置,并解释了如何通过百分比来确定告警在Link网元上的位置。
95 0
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)

热门文章

最新文章