HTML5+CSS3网站设计基础教程 第3版 第4章 CSS3选择器.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 4.6 阶段案例——风云人物列表页面 本章重点讲解了CSS3中一些常用的选择器，为了使读者更好的掌握选择器的使用，本节将通过案例的形式分步骤制作一个风云人物列表页面。 风云人物列表默认效果 4.6 阶段案例——风云人物列表页面 当鼠标指针悬浮于导航选项时，导航选项的效果 4.6 阶段案例——风云人物列表页面 单击第一个导航选项的效果 4.6 阶段案例——风云人物列表页面 4.6.1 分析效果图 4.6 阶段案例——风云人物列表页面 4.6.2 制作页面结构 4.6 阶段案例——风云人物列表页面 4.6.3定义CSS样式 4.6 阶段案例——风云人物列表页面 本章小结 本章重点介绍了CSS3中的一些选择器，包括属性选择器、关系选择器、结构化伪类选择器、状态化伪类选择器和伪元素选择器，并通过一个阶段案例——风云人物列表对所学内容进行巩固。 通过本章的学习，读者能了解这些选择器的使用技巧。但CSS3选择器众多，本章仅展示了部分选择器的用法，读者可深入学习，探究更多选择器的功能和用法。 * * * * * * * * * * * * * * * * * * * * * * * 4.3.5 :nth-child(n)选择器和:nth-last-child(n)选择器 4.3 结构化伪类选择器 为什么需要:nth-child(n)选择器和:nth-last-child(n)选择器？ 原因: 使用:first-child选择器和:last-child选择器可以选择父标签中第一个子标签和最后一个子标签，但是如果用户想要选择其他位置的子标签，例如，第2个或倒数第2个子标签，:first-child选择器和:last-child选择器就不起作用了。为此，CSS3引入了:nth-child(n)选择器和:nth-last-child(n)选择器。 4.3.5 :nth-child(n)选择器和:nth-last-child(n)选择器 4.3 结构化伪类选择器 4.3 结构化伪类选择器 :nth-child(n)选择器用于选择父标签中的第n个子标签。 :nth-last-child(n)用于选取父标签中的倒数第n个子标签。 4.3.5 :nth-child(n)选择器和:nth-last-child(n)选择器 :nth-child(2) 例如：选取父标签中的第2个子标签 4.3 结构化伪类选择器 4.3.5 :nth-child(n)选择器和:nth-last-child(n)选择器 案例演示 4.3.6 :first-of-type选择器和:last-of-type选择器 掌握:first-of-type选择器和:last-of-type选择器的用法，能够选择父标签中特定类型的子标签。 学习目标 4.3 结构化伪类选择器 4.3 结构化伪类选择器 :first-of-type选择器用于匹配父标签中第1个特定类型的子标签。 :last-of-type选择器用于匹配父标签中最后1个特定类型的子标签。 4.3.6 :first-of-type选择器和:last-of-type选择器 案例演示 4.3.7 :nth-of-type(n)选择器和:nth-last-of-type(n)选择器 掌握:nth-of-type(n)选择器和:nth-last-of-type(n)选择器的用法，能够选择父标签中倒数第3个特定类型的子标签。 学习目标 4.3 结构化伪类选择器 4.3 结构化伪类选择器 :nth-of-type(n)选择器用于匹配父标签中特定类型的第n个子标签。 :nth-last-of-type(n)选择器用于匹配父标签中特定类型的倒数第n个子标签。 案例演示 4.3.7 :nth-of-type(n)选择器和:nth-last-of-type(n)选择器 4.3.8 :empty选择器 掌握:empty选择器的用法，能够选择内容为空的标签。 学习目标 4.3 结构化伪类选择器 4.3 结构化伪类选择器 :empty选择器用来选择没有子标签或内容为空的所有标签。 案例演示 4.3.8 :empty选择器 4.3.9 :target选择器 掌握:target选择器的用法，能够凸出显示目标内容。 学习目标 4.3 结构化伪类选择器 4.3 结构化伪类选择器 :target选择器用于突出显示当前活动的目标元素。只有用户单击页面中的超链接，并且跳转到:target选择器控制的元素后，:target选