网页设计与开发（HTML5+CSS3） 课件 项目4 利用CSS3新增选择器制作网页.pptx

项目4利用CSS3新增选择器制作网页录属性选择器的应用子代选择器的应用兄弟选择器的应用:root选择器的应用录:not选择器的应用:only-child选择器的应用:first-child和:last-child选择器的应用:nth-child(n)和:nth-last-child(n)选择器的应用

0910目录:nth-of-type(n)和:nth-last-of-type(n)选择器的应用:before选择器的应用1112:after选择器的应用链接伪类选择器的应用

项目描述前面已经提到，CSS有3个基础选择器，即类选择器、ID选择器和标签选择器，而CSS3又新增了一些选择器，其可以减少结构代码中ID属性和class属性的定义从而减少代码冗余，使开发更便捷。本项目主要利用CSS3新增的选择器，以及前面所学的知识和技能，制作一个“安全教育”网页。

项目效果图

知识储备

知识目标理解属性选择器及关系选择器中的子代选择器和兄弟选择器的的用法和意义链接伪类选择器的用法和意义结构化伪类选择器的用法和意义010203

属性选择器的应用01

任务描述使用属性选择器的3种方式分别定义网页中的不同文字内容，要求体现出这3种方式的不同之处，效果如右图所示。

知识点拨?CSS3属性选择器01

子代选择器的应用02

任务描述使用关系选择器中的子代选择器对网页中的文本内容进行样式设置，要求体现出子代选择器的用法，效果如右图所示。

知识点拨子代选择器01子代选择器是关系选择器的一种，由符号“”连接，主要用来选择某个元素的第一级子元素。在该任务中，h2strong代表这个选择器的样式只应用于h2元素的第一级子元素strong的内容：天和海两个文字最终应用了该选择器的样式，而第二个h2元素里面的strong因是第二级子元素，所以无法应用该样式。

兄弟选择器的应用03

任务描述使用兄弟选择器中的邻近兄弟选择器和普通兄弟选择器对网页中的文本内容进行样式设置，要求体现出不同兄弟选择器的用法，效果如右图所示。

知识点拨兄弟选择器也是关系选择器的一种，主要分为邻近兄弟选择器和普通兄弟选择器。邻近兄弟选择器可选择紧跟在另一元素后的元素，且二者有相同的父元素。该选择器用“+”连接前后两个选择器。例如，在该任务的4-3-1.html中，选择器“p+h2”的样式只应用于p元素后紧跟着它的h2元素。普通兄弟选择器用“~”连接前后两个选择器，且二者有相同的父元素，但第2个元素不必紧跟在第1个元素之后。例如，在该任务的4-3-2.html中，p元素后面所有的h2元素都应用了该选择器的样式。兄弟选择器01

:root选择器的应用04

任务描述使用:root选择器对网页的样式进行统一设置，效果如右图所示。

知识点拨:root选择器是结构化伪类选择器的一种。结构化伪类选择器允许开发者根据文档结构来指定元素的样式。:root选择器用于匹配文档的根标签，它定义的样式对页面中的所有标签都有效。在该任务中，:root选择器定义的样式应用于整个网页，但因为h2标签又单独定义了字体颜色，所以h2标题的颜色覆盖了原有的红色，变成了蓝色。:root选择器01

:not选择器的应用05

任务描述使用:not选择器定义网页中部分内容的样式，效果如右图所示。

知识点拨:not选择器也是结构化伪类选择器的一种，主要用于选取除指定元素以外的所有元素，一般与其他选择器一起使用，以选取指定组合中除指定元素以外的所有元素。在该任务中，body:not(h3)选择器代表页面中除h3以外的所有元素都应用这个选择器定义的样式。:not选择器01

:only-child选择器的应用06

任务描述使用:only-child选择器定义网页中部分内容的样式，效果如右图所示。

知识点拨:only-child选择器01:only-child选择器也是结构化伪类选择器的一种，用于匹配属于其父元素的唯一子元素。在该任务中，选择器li:only-child代表该选择器样式应用于只有一个列表项的内容。

:first-child和:last-child选择器的应用07

任务描述使用:first-child和:last-child选择器定义网页中不同内容的样式，效果如右图所示。

知识点拨?:first-child和:last-child选择器01:first-child和:last-child选择器也是结构化伪类选择器，分别用于选择父元素中的第一个和最后一个子元素。在该任务中，分别为父元素为body的第一个p元素和最后一个p元素定义了相关字体样式。

:nth-child(n)和:nth-last-child(n)选择器的应用08

任务描述使用: