作者：陆凌牛
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML 5与CSS 3权威指南(第4版·下册)试读：
前言
为何写作本书？如果要盘点2010年IT届的十大热门技术，云计算、移动开发、物联网等无疑会在其中，HTML 5肯定也是少不了的。2010年，随着HTML 5的迅猛发展，各大浏览器开发公司（如Google、微软、苹果、Mozilla和Opera）的浏览器开发业务都变得异常繁忙。在整个2010年度，无论是Mozilla的Firefox、Google的Chrome、苹果的Safari、微软的Internet Explorer，还是欧普拉的Opera都处于不断推陈出新的状态当中。
2010年3月，在微软的MIX2010大会上，微软的工程师在介绍Internet Explorer 9浏览器的同时，还从前端技术的角度把互联网的发展分为了三个阶段：
第一阶段：Web 1.0的以内容为主的网络，前端主流技术是HTML和CSS；
第二阶段：Web 2.0的Ajax应用，热门技术是JavaScript、DOM、异步数据请求；
第三阶段：即将迎来的HTML 5时代，亮点是富图形和富媒体内容（Graphically-Rich and Media-Rich）。
前端技术将进入一个崭新的时代，至少已经开启了这扇门。
在这种局势下，学习HTML 5无疑成为Web开发者的一大重要任务，谁先学会HTML 5，谁就掌握了迈向未来Web平台的方向。因此，我希望能够借助本书帮助国内的Web开发者更好地学习HTML 5以及与之相伴的CSS 3技术，使大家能够早日运用这些技术开发出一个具有现代水平的、在未来的Web平台上能够正常运行的Web网站或Web应用程序。第4版与第3版的区别
自2016年上半年本书第3版出版以来，一直受到广大读者的欢迎，笔者在这里首先感谢广大读者的支持。自本书第3版出版之后，HTML 5与CSS 3标准不断发展，2016年11月，W3C发布HTML 5.1版本；2017年12月，W3C发布HTML 5.2版本。各主流浏览器也以最快的速度对HTML 5中各种最新公布的API提供了支持，其中包括对ECMA Script 2015以上版本的支持、对indexedDB 2.0版本的支持、对Fetch API的支持、改用Service Worker对离线应用程序提供支持、对BroadcastChannel API的支持、对Web组件模块（其中包括HTML模块、Shadow DOM、自定义元素、HTML导入）的支持、对Web Animations API的支持等。因此，本书第4版以第3版的内容为基础，添加2016年上半年到2018年上半年之间HTML 5中新增的各种元素及API，同时更新各主流浏览器CSS 3的最新支持情况，以使读者能够学到HTML 5与CSS 3标准中的各种知识，了解各种最新的浏览器中对HTML 5与CSS 3标准的最新支持情况，以帮助读者能够早日将这些新的知识打造成一个HTML 5时代的功能强大的Web网站或Web应用程序。
具体来说，在第4版在第3版的基础上做出的主要修改如下所示：
·第2章“HTML5与HTML4的区别”中删除在HTML 5.1中被移除的元素。
·新增第5章“ECMAScript中的新增功能”。
·第7章“本地存储”（原书中第8章）中新增indexedDB 2.0部分。
·第8章“扩展的XMLHttpRequest API”（原书中第13章）修改为“扩展的XMLHttp-Request API及Fetch API”，新增8.4节“使用Fetch API”。
·新增第10章“使用Service Worker实现离线应用程序”。
·第11章“通信API”中新增11.4节“BroadcastChannel API”。
·新增第12章“Web组件”。
·第13章“绘制图形”（原书中第5章）中新增13.9.3节“将canvas元素中的图像转换为Blob对象”与13.9.5节“解码图像”。
·第18章“文字与字体相关样式”中新增18.4节“指定用户是否可选取文字的user-select属性”。
·第22章“CSS3中的动画功能”中新增22.3节“Web Animations API”。
·第23章“布局相关样式”中新增23.4节“网格布局”。
·第24章“Media Queries相关样式”一章修改为第24章“媒体查询表达式与特性查询表达式”，新增24.2节“特性查询表达式”。
·第25章“CSS 3的其他重要样式和属性”中新增25.4节“用于控制鼠标事件的pointer-events属性”与25.6节“CSS变量”。本书面向的读者
本书主要适合如下人群阅读：
·具有一定基础的Web前端开发工程师
·具有一定美术功底的Web前端设计师和UI设计师
·Web项目的管理人员
·开设了Web开发等相关专业的高等院校师生和相关培训机构的学员及教师如何阅读本书
本书从逻辑上共分为三个部分：
第一部分（第1～14章） 对HTML 5中新增的语法与标记方法、新增的元素、新增的API以及到本书截稿时这些元素与API受到了哪些浏览器的支持等进行了详细介绍。在对它们进行介绍的同时将其与HTML 4中的各种元素与功能进行了对比，以帮助读者更好地理解为什么需要使用HTML 5、使用HTML 5有什么好处、HTML 5中究竟增加了哪些目前HTML 4不具备而在第三代Web平台上将会起到重要作用的功能与API，以及这些功能与API的详细使用方法。
第二部分（第15～25章） 详细介绍了CSS 3中的各种新增样式与属性，其中主要包括CSS 3中的各种选择器、文字与字体、背景与边框、各种盒模型、CSS 3中的布局方式、CSS 3中的变形与动画、CSS 3中与媒体类型相关的一些样式与属性等。在介绍的同时也详细讲述了到本书截稿时这些样式与属性受到了哪些浏览器的支持，以及针对各种浏览器应该怎样在样式代码中进行各种属性的正确书写。
第三部分（第26章） 详细讲解了一个实例，该实例展示了如何使用HTML 5中新增的表单元素、如何读取本地数据库中的数据、如何保存数据到本地数据库、如何使用Fetch API读取服务器端的数据及提交数据到服务器端并处理服务器端响应、如何保存数据到LocalStorage及从LocalStorage读取保存后的数据、从而实现一个具有现代风格的Web应用程序，如何在这个由HTML 5语言及其功能编写而成的Web应用程序中综合使用CSS 3样式来完成页面的布局以及视觉效果的美化工作。
全书一共有300多个代码示例，每个代码示例都经过笔者上机实践，确保运行结果正确无误。每个代码示例的详细代码及其用到的脚本文件、各种资源文件都可在华章公司的官方网站（www.hzbook.com）本书的页面上下载，因为是用HTML 5编写的网页，所以这些文件可直接在各种浏览器中打开并查看运行结果。少量页面需要首先建立网站，然后通过访问网站中该页面的方式来进行查看，少量页面使用服务器端PHP脚本语言，可在Apache服务器中运行。书中详细介绍了对HTML 5中的各种元素、各种API和CSS 3中的各种属性和样式提供支持的浏览器，读者可以针对不同的页面选择正确的浏览器来查看其正确的运行结果。致谢
在本书的写作过程中，策划编辑杨福川先生和李艺女士给予了很大的帮助和支持，并提出了很多中肯的建议，在此表示感谢。同时，还要感谢机械工业出版社的所有编审人员为本书的出版所付出的辛勤劳动。本书的成功出版是大家共同努力的结果，谢谢你们。
另外，在本书的写作过程当中，由于时间及水平上的原因，可能存在一些对HTML 5及CSS 3上认识不全面或疏漏的地方，敬请读者批评更正，作者的联系QQ为240824399，联系邮箱为240824399@qq.com，谨以最真诚的心希望能与读者交流，共同成长。 第15章 CSS 3概述
从2010年开始，HTML 5与CSS 3就一直是互联网技术中最受关注的两个话题。2010年MIX10大会上微软的工程师在介绍IE 9时，从前端技术的角度把互联网的发展分为三个阶段：第一阶段是Web 1.0的以内容为主的网络，前端主流技术是HTML和CSS；第二阶段是Web 2.0的Ajax应用，热门技术是JavaScript、DOM、异步数据请求；第三阶段是即将迎来的HTML 5+CSS 3的时代，这两者相辅相成，使互联网又进入了一个崭新的时代。
本章将对CSS 3进行一个全面的、概要的介绍，使大家对CSS 3有一个初步的、总体上的认识。
学习内容：
·掌握CSS 3的基础知识，知道什么是CSS 3，了解CSS 3的发展历史。
·掌握CSS 3的模块化结构，了解CSS 3中包含了哪些结构。
·了解CSS 3与CSS 2有什么主要区别，了解CSS 3将对下一代Web平台上的界面设计做出哪些重大贡献。15.1 概要介绍15.1.1 CSS 3是什么
首先，我们对CSS 3做一个概要的介绍。什么是CSS 3？CSS 3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems等许多Web界的巨头联合组成的一个名为“CSS Working Group”的组织共同协商策划的。虽然目前很多细节还在讨论之中，但它还是不断地朝前发展着。2010年在HTML 5成为IT界人士关注的焦点的同时，它也开始慢慢地普及开来。15.1.2 CSS 3的历史
接下来，我们从总体上看一下CSS的发展历史。
·CSS 1。1996年12月，CSS 1（Cascading Style Sheets，level 1）正式推出。在这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
·CSS 2。1998年5月，CSS 2（Cascading Style Sheets，level 2）正式推出。在这个版本中开始使用样式表结构。
·CSS 2.1。2004年2月，CSS 2.1（Cascading Style Sheets，level 2revision 1）正式推出。它在CSS 2的基础上略微做了改动，删除了许多诸如text-shadow等不被浏览器所支持的属性。
现在所使用的CSS基本上是在1998年推出的CSS 2的基础上发展而来的。10年前在Internet刚开始普及的时候，就能够使用样式表来对网页进行视觉效果的统一编辑，这确实是一件可喜的事情。但是在这10年间CSS可以说基本上没有什么变化，一直到2010年终于推出了一个全新的版本——CSS 3。15.2 使用CSS 3能做什么15.2.1 模块与模块化结构
在CSS 3中，并没有采用总体结构，而是采用了分工协作的模块化结构，这些模块如表15-1所示。表15-1 CSS 3中的模块
那么，为什么需要分成这么多模块来进行管理呢？
这是为了避免产生浏览器对于某个模块支持不完全的情况。如果只有一个总体结构，这个总体结构会过于庞大，在对其支持的时候很容易造成支持不完全的情况。如果把总体结构分成几个模块，各浏览器可以选择对于哪个模块进行支持、对哪个模块不进行支持，支持的时候也可以集中把某一个模块全部支持完了再支持另一个模块，以减少支持不完全的可能性。
例如，台式计算机、笔记本和手机上用的浏览器应该针对不同的模块进行支持。如果采用模块分工协作的话，不仅是台式计算机，各种设备上所用的浏览器都可以选用不同模块进行支持。15.2.2 一个简单的CSS 3示例
现在，我们已经对CSS 3的模块和模块化结构有了一个初步的认识，那么，究竟我们能够用CSS 3来做些什么呢？
这里，我们通过一个示例来将CSS 2与CSS 3做一个对比，借此使大家对CSS 3有一个初步的印象。
在这个示例中，我们给页面上的某个div区域添加一个彩色图像边框，这样可以使这个区域看上去漂亮很多，生动很多。
在CSS 2中，当然可以实现这个效果，如代码清单15-1所示。
代码清单15-1 使用CSS 2给div区域添加图像边框
·示例文字2
·示例文字3
·示例文字4
这段代码在Firefox浏览器中的运行结果如图15-1所示。
接下来，我们看一下在CSS 3中如何实现这个功能。
在CSS 3中，添加了很多新的样式，譬如可以创建圆角边框，可以在边框中使用图像，可以修改背景图像的大小，可以对背景指定多个图像文件，可以修改颜色的透明度，可以给文字添加阴影，可以在CSS中重新指定表单的尺寸等。
在代码清单15-2中，我们使用CSS 3来实现与代码清单15-1相同的功能。具体操作的时候，只要给页面中的div元素增加一个border-image属性，然后在该属性中指定图像文件与边框宽度就可以了。
代码清单15-2 使用CSS 3给div区域添加图像边框
·示例文字2
·示例文字3
·示例文字4
这段代码的运行后结果与图15-1所示结果相同。
虽然目前看来两种方法都达到了同样的效果，只是实现方法不同而已。但是如果再在div中增加一行文字，我们看一下使用CSS 2中的样式表后会是什么情况，如图15-2所示。图15-1 使用CSS 2样式添加图像边框图15-2 使用CSS 2样式表，当文字超过图像高度时的页面外观
同样，来看一下使用CSS 3中的样式表后会是什么情况，如图15-3所示。
为什么在CSS 3中文字没有超出边框图像之外？这是因为在CSS 3样式表中，在指定边框图像的同时，也指定了图像允许拉伸来自动适应div区域的高度，而不是采取CSS 2中将div区域高度设为边框图像高度的方式。那么，也许有人会问，如果在CSS 2的div元素的样式代码中不指定div区域的高度是否可以呢？这样的话就会出现如图15-4所示的情况。图15-3 使用CSS 3样式表，当文字超过图像高度时的页面外观图15-4 在CSS 2的样式代码中不指定div区域高度的效果
从图中可以看出，当只有一行文字的时候，该边框图像又不能完全显示了。因此，当div区域中的文字高度处于不断变化的状态时，使用CSS 2样式表添加边框图像的操作相对来说就比较麻烦。在CSS 3中考虑到了这种情况，添加了允许边框图像自动拉伸的属性，从而解决了这个问题。
关于如何使用border-image这个属性，我们将在后面进行详细介绍。在这里，我们通过这个示例，向大家表明了目前在CSS 2中一些比较难以处理的情况，在CSS 3中通过使用新增属性很容易就能够解决。
这对界面设计来说，无疑是一件非常可喜的事情。在界面设计中，最重要的就是创造性，如果能够使用CSS 3中新增的各种各样的属性，就能够在页面中增加许多CSS 2中没有办法解决的样式，摆脱现在界面设计中存在的许多束缚，从而使整个网站或Web应用程序的界面设计进入一个新的台阶。 第16章 选择器
本章针对CSS 3中使用的各种选择器进行详细介绍，通过选择器的使用，你不再需要在编辑样式时使用多余的以及没有任何语义的class属性，而是直接将样式与元素绑定起来，从而节省大量在网站或Web应用程序已经完成之后修改样式时所需花费的时间。
学习内容：
·掌握CSS 3中使用的选择器的基本概念。知道什么是选择器以及为什么需要使用选择器，使用选择器有什么好处。
·掌握CSS 3中的各种属性选择器的概念以及使用方法，其中包括：
·[att=val]选择器
·[att*=val]选择器
·[att^=val]选择器
·[att$=val]选择器
·掌握CSS3中的各种结构性伪类选择器的概念以及使用方法，其中包括：
·root选择器
·not选择器
·empty选择器
·target选择器
·first-child选择器
·last-child选择器
·nth-child选择器
·nth-last-child选择器
·nth-of-type选择器
·nth-last-of-type选择器
·only-child选择器
·掌握CSS3中的各种UI元素状态伪类选择器的概念以及使用方法，其中包括：
·E：hover选择器
·E：active选择器
·E：focus选择器
·E：enabled选择器
·E：disabled选择器
·E：read-only选择器
·E：read-write选择器
·E：checked选择器
·E：default选择器
·E：indeterminate选择器
·E：：selection选择器
·E：invalid选择器
·E：valid选择器
·E：required选择器
·E：optional选择器
·E：in-range选择器
·E：out-of-range选择器
·掌握CSS3中的通用兄弟元素选择器的概念及使用方法。16.1 选择器概述
选择器是CSS 3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。
在样式表中，一般会书写大量的代码，在大型网站中，样式表中的代码可能会达到几千行。麻烦的是，当整个网站或整个Web应用程序全部书写好之后，需要针对样式表进行修改时，在洋洋洒洒一大篇CSS代码之中，并没有说明什么样式服务于什么元素，只是使用了class属性，然后在页面中指定了元素的class属性。但是，使用元素的class属性有两个缺点：第一，class属性本身没有语义，它纯粹用来为CSS样式服务，属于多余属性；第二，使用class属性的话，并没有把样式与元素绑定起来，针对同一个class属性，文本框也可以使用，下拉框也可以使用，甚至按钮也可以使用，这样其实是非常混乱的，修改样式时也很不方便。
所以，在CSS 3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也变得简洁明了。
具体来说，使用选择器进行样式指定时，采用类似E[foo$="val"]这种正则表达式的形式。在样式中，声明该样式应用于什么元素，该元素的某个属性的属性值必须是什么。例如，我们可以指定将页面中id为“div_Big”的div元素的背景色设定为红色，代码如下所示。div[id="div_Big"] {background: red;}
这样，符合这个条件（id为“div_Big”）的div元素的背景色被设为红色，不符合这个条件的div元素不使用这个样式。
另外，我们还可以在指定样式时使用“^”通配符（开头字符匹配）、“？”通配符（结尾字符匹配）与“*”通配符（包含字符匹配）。如指定id末尾字母为“t”的div元素的背景色为蓝色，代码如下所示。div[id$="t"] {background: red;}
使用通配符能大大提高样式表的书写效率。16.2 属性选择器16.2.1 属性选择器概述
在HTML中，通过各种各样的属性，我们可以给元素增加很多附加信息。例如，通过width属性，我们可以指定div元素的宽度；通过id属性，我们可以将不同的div元素进行区分，并且通过JavaScript来控制这个div元素的内容和状态。
接下来，我们在代码清单16-1中看一个HTML页面，该页面中包含一些div，每个div之间用id属性进行区分。
代码清单16-1 一个具有很多div元素的页面
接下来，我们回顾一下CSS 2中对div元素使用样式的方法，如果要将id为“section1”的div元素的背景色设定为黄色，我们首先追加样式，如下所示。
然后指定id为“section1”的这个div元素的class属性，如下所示。
接下来，我们看一下CSS2中如何使用属性选择器来实现同样的处理。
使用属性选择器时，需要声明属性与属性值，声明方法如下所示。[att=val]
其中att代表属性，val代表属性值。例如，要将id为“section1”的div元素的背景色设定为黄色，我们只要在代码清单16-1中加入如下所示的样式代码即可。
最后，我们在代码清单16-2中完整地看一下使用CSS 2的属性选择器的示例代码，在本节中接下来的部分都只会针对这个示例中的样式代码进行修改，其他部分不做修改。
代码清单16-2 使用CSS 2的属性选择器的示例
追加了这个属性选择器后的运行结果如图16-1所示。16.2.2 CSS 3中的属性选择器
在CSS3中，追加了三个属性选择器分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。1.[att*=val]属性选择器
[att*=val]属性选择器的含义是：如果元素用att表示的属性的属性值中包含用val指定的字符，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id*=section1]”，其中“id”相当于[att*=val]属性选择器中的“att”，“section1”相当于[att*=val]属性选择器中的“val”。
在代码清单16-1所述示例的样式代码中，如果使用如下代码中所示的[att*=val]属性选择器，则页面中id为“section1”“subsection1-1”“subsection1-2”的div元素的背景色都变为黄色，因为这些元素的id属性中都包含“section1”字符。[id*=section1]{ background-color: yellow;}
代码清单16-1所述示例的样式代码中使用[att*=val]属性选择器后的运行结果如图16-2所示。图16-1 使用CSS 2的属性选择器的示例图16-2 使用[att*=val]属性选择器的示例2.[att^=val]属性选择器
[att^=val]属性选择器的含义是：如果元素用att表示的属性的属性值的开头字符为用val指定的字符话，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id^=section1]”。
在代码清单16-1所述示例的样式代码中，如果将使用的[att=val]属性选择器改为使用如下所示的[att^=val]属性选择器，并且将val指定为“section”，则页面中id为“section1”“section2”的div元素的背景色都变为黄色，因为这些元素的id属性的开头字符都为“section”字符。[id^=section]{ background-color: yellow;}
代码清单16-1所述示例的样式代码中使用[att^=val]属性选择器后的运行结果如图16-3所示。3.[att$=val]属性选择器
[att$=val]属性选择器的含义是：如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式。针对上面所述“[id=section1]”属性选择器可以修改成“[id$=section1]”。
在代码清单16-1所述示例的样式代码中，如果采用如下所示的[att$=val]属性选择器，并且将val指定为“-1”，则页面中id为“subsection1-1”“subsection2-1”的div元素的背景色都变为黄色，因为这些元素的id属性的结尾字符都为“-1”字符。另外请注意该属性选择器中在指定匹配字符前必须加上“\”这个escape字符。[id$=\-1]{ background-color: yellow;}
代码清单16-1所述示例的样式代码中使用[att$=val]属性选择器后的运行结果如图16-4所示。图16-3 使用[att^=val]属性选择器的示例图16-4 使用[att$=val]属性选择器的示例16.2.3 灵活运用属性选择器
如果能够灵活运用属性选择器，目前为止需要依靠id或class名才能实现的样式完全可以使用属性选择器来实现。
例如，利用[att$=val]属性选择器，可以根据超链接中不同的文件扩展符使用不同的样式。在代码清单16-3所示示例中，在超链接地址的末尾为“／”“htm”“html”时显示“Web网页”文字，在超链接地址的末尾为“jpg”“jpeg”时显示“JPEG图像文件”文字。
代码清单16-3 灵活运用属性选择器示例
这段代码的运行结果如图16-5所示。图16-5 灵活运用属性选择器示例
另外，如果使用IE浏览器来运行本示例，因为在IE 8之前尚未支持after伪元素选择器，所以该示例只能在IE 8之后的浏览器中正确显示，在接下来的“伪元素选择器概述”一节中将针对after伪元素选择器做详细说明。16.3 结构性伪类选择器
本节介绍CSS 3中的结构性伪类选择器。在介绍结构性伪类选择器之前，先来介绍一下CSS中的伪类选择器及伪元素。16.3.1 CSS中的伪类选择器及伪元素1.伪类选择器概述
我们知道，在CSS中，可以使用类选择器把相同的元素定义成不同的样式，如针对一个p元素，我们可以做如下所示定义。p.right{text-align:right}p.center{text-align:right}
然后在页面上对p元素使用class属性，把定义好的样式指定给具体的p元素，代码如下所示。
测试文字
测试文字
在CSS中，除了上面所述的类选择器之外，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，如上面的“p.right”与“p.center”，你也可以命名为“p.class1”与“p.class2”，然后在页面上使用“class='class1'”与“class='class2'”，但是伪类选择器是CSS中已经定义好的选择器，不能随便起名。在CSS中我们最常用的伪类选择器是使用在a（锚）元素上的几种选择器，它们的使用方法如下所示。a:link {color:#FF0000;text-decoration:none}a:visited {color:#00FF00;text-decoration:none} a:hover {color:#FF00FF;text-decoration:underline} a:active {color:#0000FF;text-decoration:underline}2.伪元素选择器概述
伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，它的使用方法如下所示。选择器：伪元素{属性：值}
伪元素选择器也可以与类配合使用，使用方法如下所示。选择器.类名：伪元素{属性：值}
在CSS中，主要有如下四个伪元素选择器。（1）first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
代码清单16-4是它的一个使用示例，在该示例中，有一个p元素，在该元素内存在两行文字，使用first-line伪元素选择器将第一行文字设为蓝色。
代码清单16-4 first-line伪元素使用示例
段落中的第一行。
段落中的第二行
这段代码的运行结果如图16-6所示。（2）first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。
代码清单16-5是first-letter伪元素选择器的一个使用示例，在该示例中，有两段文字——一段是英文，另一段是中文，使用first-letter伪元素选择器来设置这两段文字的开头字母或文字的颜色为蓝色。
代码清单16-5 first-letter伪元素选择器
This is an english text。
这是一段中文文字。
这段代码的运行结果如图16-7所示。图16-6 first-line伪元素使用示例图16-7 first-letter伪元素使用示例（3）before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容，使用方法如下所示。// 可以插入一段文字<元素〉：before{ content：插入文字}// 也可以插入其他内容<元素〉：before{ content：url(test.wav)}
代码清单16-6是before伪元素选择器的一个使用示例，在该示例中有一个ul列表，该列表中有几个li列表项目，使用before伪元素选择器在每个列表项目的文字的开头插入“·”字符。
代码清单16-6 before伪元素选择器的使用示例
- 列表项目1
- 列表项目2
- 列表项目3
- 列表项目4
- 列表项目5
这段代码的运行结果如图16-8所示。（4）after伪元素选择器
after伪元素选择器用于在某个元素之后插入一些内容，使用方法如下所示。<元素>：after{ content：插入文字}// 也可以插入其他内容<元素>：after{ content：url(test.wav)}
代码清单16-7是after伪元素选择器的一个使用示例，在该示例中有一个ul列表，这个ul列表的内容为某个网站上播放电影的节目清单。该列表中有几个列表项目，每个列表项目中存放了对于某部电影的超链接，使用after伪元素选择器在每个超链接的后面加入“（仅用于测试，请勿用于商业用途。）”的文字，并且将文字颜色设为红色。
代码清单16-7 after伪元素选择器的使用示例
电影清单
这段代码的运行结果如图16-9所示。图16-8 before伪元素使用示例图16-9 after伪元素选择器使用示例16.3.2 选择器root、not、empty和target
在介绍完了CSS中的伪类选择器与伪元素选择器之后，让我们来看一下CSS 3中的结构性伪类选择器。结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。
首先，我们来看4个最基本的结构性伪类选择器——root选择器、not选择器、empty选择器与target选择器。1.root选择器
root选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的“”部分。
代码清单16-8为一个HTML页面，在该页面中，有一段文章，并且有一个文章的标题。
代码清单16-8 root选择器示例的HTML界面
选择器概述
选择器是CSS3中一个重要的内容。首先需要说明的是，使用选择器的目的是为了提高开发人员书写或修改样式表时的工作效率，因为在样式表中，一般会书写大量的代码，在大型网站中，样式表中的代码可能会达到几千行。
针对这个网页，使用如下所示的root选择器来指定整个网页的背景色为黄色，将网页中body元素的背景色设为绿色。
使用了root选择器后的运行结果如图16-10所示。图16-10 root选择器使用示例
另外，在使用样式指定root元素与body元素的背景时，根据不同的指定条件背景色的显示范围会有所变化，这一点请注意。如同样是上面这个示例，如果采取如下所示的样式，不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成绿色的了。
删除root选择器后的页面如图16-11所示。图16-11 删除root选择器后的显示效果2.not选择器
如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。
譬如针对代码清单16-8所示的HTML页面，我们可以使用“body*”语句来指定body元素的背景色为黄色，但是使用“：not（h1）”语句中使用的not选择器排除h1元素，代码如下所示。
使用not选择器后的运行结果如图16-12所示。3.empty选择器
使用empty选择器来指定当元素中内容为空白时使用的样式。例如，在代码清单16-9所示的HTML页面中，有一个表格。可以使用empty选择器来指定当表格中某个单元格内容为空白时，该单元格背景为黄色。
代码清单16-9 empty选择器使用示例
| A | B | C |
| D | E |
使用empty选择器后的运行结果如图16-13所示。图16-12 使用not选择器示例图16-13 使用empty选择器示例4.target选择器
使用target选择器来对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
接下来我们来看一个target选择器的使用示例。页面中包含几个div元素，每个div元素都存在一个书签，当用户点击了页面中的超链接跳转到该div元素时，该div元素使用target选择器中指定的样式，在target选择器中，指定该div元素的背景色变为黄色。其中指定target选择器时的代码如下所示。target{ background-color: yellow;}
该示例的详细代码如代码清单16-10所示。
代码清单16-10 target选择器使用示例
示例文字1
...此处略去
示例文字2
...此处略去
示例文字3
...此处略去
示例文字4
...此处略去
示例文字5
...此处略去
使用target选择器后的运行结果如图16-14所示。
试读结束[说明：试读内容隐藏了图片]