1、HTML5+CSS3网页设计基础第5章 CSS3选择器第1页第五章第五章 CSS3选择器选择器本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第5章 CSS3选择器第2页本章概述本章概述l选择器是一种模式，用于选择需要添加样式的元选择器是一种模式，用于选择需要添加样式的元素。网页设计时使用选择器选择某些元素进行样素。网页设计时使用选择器选择某些元素进行样式定义，实现灵活的样式控制。本章将具体介绍式定义，实现灵活的样式控制。本章将具体介绍常用的常用的CSS3选择器的功能和用法。选择器的功能和用法。HTML5+CSS3网页设计基础第5章 CSS3选择器第3页本章的学习目标本章的学习
2、目标l掌握掌握CSS3中新增属性选择器的用法，能运用属中新增属性选择器的用法，能运用属性选择器选择页面上的元素添加样式。性选择器选择页面上的元素添加样式。l掌握常用的伪类选择器的用法，能够为名称相同掌握常用的伪类选择器的用法，能够为名称相同或类型相同的子元素定义不同的样式。或类型相同的子元素定义不同的样式。l掌握伪元素选择器的用法，能够在页面上特定位掌握伪元素选择器的用法，能够在页面上特定位置插入需要的文字或图片。置插入需要的文字或图片。l掌握链接伪类的用法，能够用链接伪类实现页面掌握链接伪类的用法，能够用链接伪类实现页面上超链接的特效。上超链接的特效。HTML5+CSS3网页设计基础第5章
3、CSS3选择器第4页主要内容主要内容5.1 属性选择器属性选择器5.2 伪类选择器伪类选择器5.3 伪元素选择器伪元素选择器5.4 链接伪类链接伪类5.5 实实训训5.6 本章小结本章小结 HTML5+CSS3网页设计基础第5章 CSS3选择器第5页5.1 属性选择器属性选择器本节主要内容：本节主要内容：l案例分析案例分析lEattribute=value选择器选择器lEattribute$=value选择器选择器lEattribute*=value选择器选择器l案例制作案例制作HTML5+CSS3网页设计基础第5章 CSS3选择器第6页5.1.1 案例分析案例分析l【案例展示】【案例展示】百
4、度新闻百度新闻-热点要闻局部页面的设计热点要闻局部页面的设计。l【知识要点】【知识要点】CSS3属性选择器属性选择器attribute=value、attribute$=value和和attribute*=value的功能、选择元的功能、选择元素的方法素的方法。l【学习目标】【学习目标】掌握掌握CSS3属性选择器的作用并灵活应用属性选择器的作用并灵活应用。l参考代码：参考代码：5-1.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器第7页5.1.2 Eattribute=value选择器选择器lEattribute=value选择器匹配属性值以指定值选择器匹配属性值以指定值val
5、ue开头开头的每个元素。即选择名称为的每个元素。即选择名称为E的标签，且该标签定义了的标签，且该标签定义了attribute属性，属性，attribute属性值包含前缀为属性值包含前缀为value的字符串的字符串。E可以省略，省略时表示匹配满足条件的任意元素。可以省略，省略时表示匹配满足条件的任意元素。HTML5+CSS3网页设计基础第5章 CSS3选择器第8页5.1.3 Eattribute$=value选择器选择器lEattribute$=value 选择器匹配属性值以指定值选择器匹配属性值以指定值value结尾结尾的每个元素。即选择名称为的每个元素。即选择名称为E的标签，且该标签定义了的
6、标签，且该标签定义了attribute属性，属性，attribute属性值包含后缀为属性值包含后缀为value的字符串的字符串。E可以省略，省略时表示匹配满足条件的任意元素。可以省略，省略时表示匹配满足条件的任意元素。HTML5+CSS3网页设计基础第5章 CSS3选择器第9页5.1.4 Eattribute*=value选择器选择器lattribute*=value 选择器匹配属性值包含指定值选择器匹配属性值包含指定值value的的每个元素。即选择名称为每个元素。即选择名称为E的标签，且该标签定义了的标签，且该标签定义了attribute属性，属性，attribute属性值包含属性值包含va
7、lue的字符串。的字符串。E可可以省略，省略时表示匹配满足条件的任意元素。以省略，省略时表示匹配满足条件的任意元素。HTML5+CSS3网页设计基础第5章 CSS3选择器5.1.5 案例制作案例制作l制作完成演示案例制作完成演示案例:百度新闻百度新闻-热点要闻局部页面热点要闻局部页面的设计的设计。l参考代码参考代码 5-1.html第10页HTML5+CSS3网页设计基础第5章 CSS3选择器第11页5.2 伪类选择器伪类选择器本节主要内容：本节主要内容：l案例分析案例分析l:first-child和和:last-child选择器选择器l:nth-child(n)和和:nth-last-chi
8、ld(n)选择器选择器l:nth-of-type(n)和和:nth-last-of-type(n)选择器选择器l:empty选择器选择器l:target选择器选择器l案例制作案例制作HTML5+CSS3网页设计基础第5章 CSS3选择器第12页5.2.1 案例分析案例分析l【案例展示】【案例展示】动态新闻列表局部页面的设置动态新闻列表局部页面的设置。l【知识要点】【知识要点】字体类型、大小、颜色、对齐方式、行间距字体类型、大小、颜色、对齐方式、行间距、结构化伪类选择器等、结构化伪类选择器等。l【学习目标】【学习目标】掌握掌握CSS文本修饰的常用属性和伪类选择器文本修饰的常用属性和伪类选择器的作
9、用并灵活应用的作用并灵活应用。l参考代码：参考代码：5-2.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器第13页5.2.2 :first-child和和:last-child选择器选择器l:first-child 选择器用于选取属于其父元素的首个子元素。选择器用于选取属于其父元素的首个子元素。l:last-child 选择器用于选择属于其父元素的最后一个子元选择器用于选择属于其父元素的最后一个子元素。素。l参考代码：参考代码：5-2-1.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器第14页5.2.3 :nth-child(n)和和:nth-last-chil
10、d(n)选择器选择器l使用使用:first-child和和:last-child选择器，可以选择父元素中第选择器，可以选择父元素中第一个或最后一个元素。但如果想选择其他位置的元素就不一个或最后一个元素。但如果想选择其他位置的元素就不行了。为此，行了。为此，CSS3中引入了中引入了:nth-child(n)和和:nth-last-child(n)选择器，用来选择父元素的第选择器，用来选择父元素的第n个或倒数第个或倒数第n个子元个子元素。使用素。使用:nth-last-child(1)和和:last-child实现的功能相同。实现的功能相同。HTML5+CSS3网页设计基础第5章 CSS3选择器第
11、15页5.2.4 :nth-of-type(n)和和:nth-last-of-type(n)选择器选择器l使用使用:nth-of-type(n)和和:nth-last-of-type(n)选择器可以选选择器可以选择父元素中特定类型的第择父元素中特定类型的第n个和倒数第个和倒数第n个子元素，而使用个子元素，而使用:nth-child(n)和和:nth-last-child(n)选择器选择父元素中的第选择器选择父元素中的第n个和倒数第个和倒数第n个子元素时，与元素类型无关。个子元素时，与元素类型无关。l参考代码：参考代码：5-2-2.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器第
12、16页5.2.5 :empty选择器选择器l:empty 选择器匹配没有子元素或文本内容为空的每个元素。选择器匹配没有子元素或文本内容为空的每个元素。l参考代码：参考代码：5-2-3.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器第17页5.2.6 :target选择器选择器l:target 选择器用于选取当前活动的目标元素，为页面上的选择器用于选取当前活动的目标元素，为页面上的某个某个target元素（该元素的元素（该元素的id被用做页面中超链接的锚记名被用做页面中超链接的锚记名称来是先用）指定样式。当目标元素的称来是先用）指定样式。当目标元素的id和和:target伪选择伪
13、选择器指定的器指定的id匹配上时，它的样式就会在这个匹配上时，它的样式就会在这个id元素上生效，元素上生效，即只有当用户单击了页面上的超链接，并且跳转到目标元即只有当用户单击了页面上的超链接，并且跳转到目标元素后，素后，:target选择器所设置的样式才会起作用。选择器所设置的样式才会起作用。l参考代码：参考代码：5-2-4.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器5.2.7 案例制作案例制作l制作完成演示案例制作完成演示案例:动态新闻列表局部页面动态新闻列表局部页面。l参考代码参考代码 5-2.html第18页HTML5+CSS3网页设计基础第5章 CSS3选择器第19
14、页5.3 伪元素选择器伪元素选择器本节主要内容：本节主要内容：l案例分析案例分析l:before选择器选择器l:after选择器选择器l案例制作案例制作HTML5+CSS3网页设计基础第5章 CSS3选择器第20页5.3.1 案例分析案例分析l【案例展示】【案例展示】超链接按钮设计超链接按钮设计。l【知识要点】【知识要点】设置文本样式、伪元素选择器的用法设置文本样式、伪元素选择器的用法。l【学习目标】【学习目标】掌握掌握CSS设置文本样式的方法和伪元素选择设置文本样式的方法和伪元素选择器的用法器的用法。l参考代码：参考代码：5-3.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器
15、第21页5.3.2 :before选择器选择器l:before 选择器实现在被选元素的内容前面插入内容。选择器实现在被选元素的内容前面插入内容。l格式：格式：lE:beforelcontent:”文字文字”/url();llcontent属性来指定要插入的内容，可以是用双引号括起来属性来指定要插入的内容，可以是用双引号括起来的文本或用的文本或用url()指定路径的图片。指定路径的图片。l参考代码：参考代码：5-3-1.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器第22页5.3.3 :after选择器选择器l:after 选择器实现在被选元素的内容后面插入内容。选择器实现在被选
16、元素的内容后面插入内容。l格式：格式：lE:after lcontent:”文字文字”/url();llcontent属性用法同属性用法同:before 选择器中的选择器中的content。l参考代码：参考代码：5-3-2.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器5.3.4 案例制作案例制作l制作完成演示案例制作完成演示案例:超链接按钮设计超链接按钮设计。l参考代码参考代码 5-3.html第23页HTML5+CSS3网页设计基础第5章 CSS3选择器第24页5.4 链接伪类链接伪类本节主要内容：本节主要内容：l案例分析案例分析l案例制作案例制作HTML5+CSS3网页设
17、计基础第5章 CSS3选择器第25页5.4.1 案例分析案例分析l【案例展示】【案例展示】网页底部导航的设计网页底部导航的设计。l【知识要点】【知识要点】文本样式定义、链接伪类的应用文本样式定义、链接伪类的应用。l【学习目标】【学习目标】掌握链接伪类的作用和用法掌握链接伪类的作用和用法。l参考代码：参考代码：5-4.htmlHTML5+CSS3网页设计基础第5章 CSS3选择器5.4.2 案例制作案例制作l制作完成演示案例制作完成演示案例:网页底部导航的设计网页底部导航的设计。l参考代码参考代码 5-4.html第26页HTML5+CSS3网页设计基础第5章 CSS3选择器5.5 实训实训l用用CSS样式及属性选择器的知识设计客户案例展样式及属性选择器的知识设计客户案例展示局部页面示局部页面。l参考代码参考代码 5-5.html第27页HTML5+CSS3网页设计基础第5章 CSS3选择器第28页5.6 本章小结本章小结 l本章介绍了常用的本章介绍了常用的CSS3选择器，包括新增的选择器，包括新增的3种属性选择种属性选择器、伪类选择器、微元素选择器和链接伪类等各种选择器器、伪类选择器、微元素选择器和链接伪类等各种选择器的功能和用法，并结合实例介绍了应用各种选择器对页面的功能和用法，并结合实例介绍了应用各种选择器对页面元素进行样式定义的方法。元素进行样式定义的方法。
