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

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