2.7 案例实战

下面以案例形式练习CSS3选择器的应用。

2.7.1 设计表格样式

本案例设计一个分层表格样式，借助否定伪类选择器和结构伪类选择器，配合CSS背景图像设计树形结构标志；借助伪类选择器设计鼠标经过时动态背景效果；利用CSS边框和背景色设计标题行的立体显示效果。演示效果如图2.26所示。

【操作步骤】

第1步，利用表格结构构建一个数据表。

第2步，使用<style>标签在当前文档中内建一个样式表，并初始化表格样式。

第3步，使用结构伪类选择器匹配合并单元格所在的行，定义合并单元格所在行加粗显示。

第4步，使用否定伪类选择器选择主体区域非最后一个th元素。以背景方式在行前定义结构路径线。

第5步，使用类选择器选择主体区域非最后一个th元素。以背景方式在行前定义结构封闭路径线。

第6步，使用thead元素把表头标题独立出来，方便CSS控制，避免定义过多的class属性。th元素有两种显示形式：一种用来定义列标题；另一种用来定义行标题。下面样式是定义表格标题列样式。

第7步，设计隔行换色的背景效果，这里主要应用了:nth-child(2n)选择器。同时使用:hover动态伪类定义鼠标经过时的行背景色动画变化，以提示鼠标当前经过行效果。

2.7.2 设计超链接样式

本案例模拟百度文库的“相关文档推荐”模块样式设计效果，演示如何利用属性选择器快速并准确匹配文档类型，为不同类型文档超链接定义不同的显示图标，以便浏览者准确识别文档类型。示例演示效果如图2.27所示。

【操作步骤】

第1步，构建一个简单的模块结构。在这个模块结构中，为了能够突出重点，忽略了其他细节信息。代码如下：

第2步，新建一个内部样式表，在样式表中对案例文档进行样式初始化，代码如下：

第3步，利用属性选择器为不同类型文档超链接定义显示图标。

【拓展】

超链接的类型和形式是多样的，如锚链接、下载链接、图片链接、空链接、脚本链接等，都可以利用属性选择器来标识这些超链接的不同样式。代码如下：