HTML5+CSS3网页设计基础-第五章--CSS3选择器

1、第1页第五章 CSS3选择器本章概述 本章的学习目标主要内容第2页本章概述选择器是一种模式，用于选择需要添加样式的元素。网页设计时使用选择器选择某些元素进行样式定义，实现灵活的样式控制。本章将具体介绍常用的CSS3选择器的功能和用法。第3页本章的学习目标掌握CSS3中新增属性选择器的用法，能运用属性选择器选择页面上的元素添加样式。掌握常用的伪类选择器的用法，能够为名称相同或类型相同的子元素定义不同的样式。掌握伪元素选择器的用法，能够在页面上特定位置插入需要的文字或图片。掌握链接伪类的用法，能够用链接伪类实现页面上超链接的特效。第4页主要内容5.1 属性选择器5.2 伪类选择器5.3 伪元素选择

2、器5.4 链接伪类5.5 实训5.6 本章小结 第5页5.1 属性选择器本节主要内容：案例分析Eattribute=value选择器Eattribute$=value选择器Eattribute*=value选择器案例制作第6页5.1.1 案例分析【案例展示】百度新闻-热点要闻局部页面的设计。【知识要点】CSS3属性选择器attribute=value、attribute$=value和attribute*=value的功能、选择元素的方法。【学习目标】掌握CSS3属性选择器的作用并灵活应用。参考代码：5-1.html第7页5.1.2 Eattribute=value选择器Eattribute=

3、value选择器匹配属性值以指定值value开头的每个元素。即选择名称为E的标签，且该标签定义了attribute属性，attribute属性值包含前缀为value的字符串。E可以省略，省略时表示匹配满足条件的任意元素。第8页5.1.3 Eattribute$=value选择器Eattribute$=value 选择器匹配属性值以指定值value结尾的每个元素。即选择名称为E的标签，且该标签定义了attribute属性，attribute属性值包含后缀为value的字符串。E可以省略，省略时表示匹配满足条件的任意元素。第9页5.1.4 Eattribute*=value选择器attribute

4、*=value 选择器匹配属性值包含指定值value的每个元素。即选择名称为E的标签，且该标签定义了attribute属性，attribute属性值包含value的字符串。E可以省略，省略时表示匹配满足条件的任意元素。5.1.5 案例制作制作完成演示案例:百度新闻-热点要闻局部页面的设计。参考代码 5-1.html第10页第11页5.2 伪类选择器本节主要内容：案例分析:first-child和:last-child选择器:nth-child(n)和:nth-last-child(n)选择器:nth-of-type(n)和:nth-last-of-type(n) 选择器:empty选择器:ta

5、rget选择器案例制作第12页5.2.1 案例分析【案例展示】动态新闻列表局部页面的设置。【知识要点】字体类型、大小、颜色、对齐方式、行间距、结构化伪类选择器等。【学习目标】掌握CSS文本修饰的常用属性和伪类选择器的作用并灵活应用。参考代码：5-2.html第13页5.2.2 :first-child和:last-child选择器:first-child 选择器用于选取属于其父元素的首个子元素。:last-child 选择器用于选择属于其父元素的最后一个子元素。参考代码：5-2-1.html第14页5.2.3 :nth-child(n)和:nth-last-child(n)选择器使用:firs

6、t-child和:last-child选择器，可以选择父元素中第一个或最后一个元素。但如果想选择其他位置的元素就不行了。为此，CSS3中引入了:nth-child(n)和:nth-last-child(n)选择器，用来选择父元素的第n个或倒数第n个子元素。使用:nth-last-child(1)和:last-child实现的功能相同。第15页5.2.4 :nth-of-type(n)和:nth-last-of-type(n) 选择器使用:nth-of-type(n)和:nth-last-of-type(n) 选择器可以选择父元素中特定类型的第n个和倒数第n个子元素，而使用:nth-child(

7、n)和:nth-last-child(n)选择器选择父元素中的第n个和倒数第n个子元素时，与元素类型无关。参考代码：5-2-2.html第16页5.2.5 :empty选择器 :empty 选择器匹配没有子元素或文本内容为空的每个元素。参考代码：5-2-3.html第17页5.2.6 :target选择器:target 选择器用于选取当前活动的目标元素，为页面上的某个target元素（该元素的id被用做页面中超链接的锚记名称来是先用）指定样式。当目标元素的id和:target伪选择器指定的id匹配上时，它的样式就会在这个id元素上生效，即只有当用户单击了页面上的超链接，并且跳转到目标元素后，:

8、target选择器所设置的样式才会起作用。参考代码：5-2-4.html5.2.7 案例制作制作完成演示案例:动态新闻列表局部页面。参考代码 5-2.html第18页第19页5.3 伪元素选择器本节主要内容：案例分析:before选择器:after选择器案例制作第20页5.3.1 案例分析【案例展示】超链接按钮设计。【知识要点】设置文本样式、伪元素选择器的用法。【学习目标】掌握CSS设置文本样式的方法和伪元素选择器的用法。参考代码：5-3.html第21页5.3.2 :before选择器:before 选择器实现在被选元素的内容前面插入内容。格式：E:beforecontent:”文字”/ur

9、l();content属性来指定要插入的内容，可以是用双引号括起来的文本或用url()指定路径的图片。参考代码：5-3-1.html第22页5.3.3 :after选择器:after 选择器实现在被选元素的内容后面插入内容。格式：E: after content:”文字”/url();content属性用法同:before 选择器中的content。参考代码：5-3-2.html5.3.4 案例制作制作完成演示案例:超链接按钮设计。参考代码 5-3.html第23页第24页5.4 链接伪类本节主要内容：案例分析案例制作第25页5.4.1 案例分析【案例展示】网页底部导航的设计。【知识要点】文本样式定义、链接伪类的应用。【学习目标】掌握链接伪类的作用和用法。参考代码：5-4.html5.4.2 案例制作制作完成演示案例:网页底部导航的设计。参考代码 5-4.html第26页5.5 实训