HTML5+CSS3网页设计技术模块4 CSS3选择器

《HTML5+CSS3网页设计技术》授课教案授课教案学校******大学（学院）任课教师***授课题目模块四CSS3选择器授课时间长度6学时所用教材HTM5+CSS3网页设计技术，黄玉春主编；中国科学技术出版社教学目标｜知识目标｜掌握CSS3组合选择器、属性选择器、伪类选择器的类型和基本应用。｜能力目标｜（1）能够使用CSS3的选择器选择目标元素并设置相应的样式。（2）掌握CSS3的书写规范，能够编写高效、可维护的CSS代码。｜素质目标｜（1）通过学习CSS高级选择器，体会用多种方法解决问题，培养灵活的思维方式。（2）在实战案例中，通过查找收集案例素材，知晓我国发展现状，关注科学技术领域的新进展。教学重点（1）CSS组合选择器。（2）CSS属性选择器。（3）CSS伪类选择器。教学难点CSS伪类选择器、微伪素的理解。教学方法任务引入法、课堂讨论、理论讲解、实操训练教学用具多媒体教学设备、教材、课件、实训素材教学过程主要教学内容及步骤考勤教师使用App或者点名等方式进行签到；学生按照老师要求签到任务导入打开一个网页，查看网页源码，引出本任务教学内容。教学内容任务一认识CSS3组合选择器CSS组合选择器说明了两个选择器直接的关系。在CSS中包含了四种组合方式。（1）后代选择器（以空格分隔）：选择指定元素的所有的后代元素。（2）子元素选择器（以大于号分隔）：选择指定元素的第一代元素。（3）相邻兄弟选择器（以加号分隔）：选择指定元素相邻的指定元素（只会向下找一个）。（4）普通兄弟选择器（以波浪线分隔）：选择指定元素后的所有指定的同级元素（向下找所有指定的同级的）。一、后代选择器后代（派生）选择器用于选择指定标签元素下的后辈元素，以空格分隔。其语法格式如下：选择器1选择器2{属性1:属性值1;属性2:属性值2;…}例如，下面的代码选择了div标签内是所有span标签，并将其字体颜色设为红色：divspan{color:red;}二、子元素选择器子元素选择器用于选择指定标签元素的所有第一代子元素，以大于号（>）分隔。其语法格式如下：选择器1>选择器2{属性1:属性值1;属性2:属性值2;…}例如，下面的代码选择选择了<div>元素中所有直接子元素<p>标签，并将其设为红色字体：div>p{color:red;}需要注意的是，后代（派生）选择器用空格隔开，选择的是所有后代元素。三、相邻兄弟选择器相邻选择器选择指定元素相邻的指定元素（只会向下找一个），以加号（+）分隔。其一般格式如下：选择器1+选择器2{属性1:属性值1;属性2:属性值2;…}例如，下面的代码选择与p元素同级第一div元素，并给其设置红色单实线边框：p+div{border:1pxsolidred;}四、普通兄弟选择器普通兄弟元素选择器选择指定元素后的所有指定的同级元素（向下找所有指定的同级的），以波浪线（~）分隔。其语法格式如下：选择器1~选择器2{属性1:属性值1;属性2:属性值2;…}例如，下面的代码选择与p元素同级的所有div元素，并将其设一个红色单实线边框：p~div{border:1pxsolidred;}任务二掌握属性选择器属性选择器是通过元素的属性选择HTML元素。属性选择器可以根据属性名和属性值进行选择。一、属性名选择器属性名选择器（E[attr]）是指选择名称为E的标签，且该标签定义了attr属性。其语法格式如下：选择器[属性值]例如代码input[type="text"]选择器将选择所有type属性为“text”的<input>元素。二、指定属性值选择器指定属性值选择器（E[attr="value"]）用于选择指定了属性和值的元素。其语法格式如下：选择器[属性=属性值]例如代码p[title="东方红"]选择器将选择所有title属性值为“东方红”的<p>元素。三、属性值包含选择器属性值包含选择器有2种。1.E[attr~="value"]该选择器用于选择属性值包含一个指定单词的元素。此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词。其语法格式如下：选择器[属性~=属性值]例如代码p[class~="s1"]选择器将选择所有class属性值中包含单词“s1”的<p>元素。2.E[attr*="value"]该选择器匹配元素属性值包含指定值的元素。其语法格式如下：选择器[属性*=属性值]例如代码p[title~="东方红"]选择器将选择所有title属性值中包含"东方红"的<p>元素。注意与属性值包含选择器（E[attr~="value"]）的区别。四、属性值匹配开始值选择器属性值匹配开始值选择器（E[attr^="value"]）是指匹配元素属性值带指定的值开始的元素。其语法格式如下：选择器[属性^=属性值]例如代码p[title^="东方红"]选择器将选择所有title属性值中以“东方红”开头的<p>元素。五、属性值匹配结尾值选择器属性值匹配结尾值选择器（E[attr$="value"]）是指匹配元素属性值带指定的值结尾的元素。其语法格式如下：选择器[属性$=属性值]例如代码p[title$="东方红"]选择器将选择所有title属性值中以“东方红”为结尾的<p>元素。任务三了解伪类选择器与伪元素伪类选择器在CSS中起到的作用可以说是至关重要的，如果CSS没有伪类选择器，有很多效果都要借助JavaScript来完成，这样不仅代码量增加，维护起来难度也大。这样程序员的工作量大，也违背了CSS诞生的作用，就是提高开发效率，在同等的世间里完成更高质量的开发。伪类选择器包括伪类和伪类对象选择器，伪类选择器以冒号（:）作为前缀标识符。一、动态伪类动态伪类是一类行为类样式，这些样式不存在于HTML中，只有当用户于页面进行交互才能体现出来。动态伪类选择器包括两种形式。（1）锚点伪类：这是一种在链接中最常见的样式，如:link、:visited。（2）行为伪类：也称用户操作伪类，如:hover、:active、:focus。二、结构伪类结构伪类是CSS3新设计的选择器，它利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和id属性的定义，使得文档更加简洁。1．:first-child选择父元素中第一个子元素。其语法格式如下：父元素子元素标签名:first-child{}例如，下面的代码将div标签内第一个p标签元素设为红色；divp:first-child{color:red;}2．:last-child选择父元素中最后一个子元素。语法格式如下：父元素子元素标签名:last-child{属性:属性值;…}例如，下面的代码将div标签内最后一个p标签元素设为红色；divp:last-child{color:red;}3．:nth-child(n)选择父元素中自行指定的子元素。n的值都是按照子元素总体数量统一排序。其中n不仅仅可以是一个数字，还可以是even偶数、odd奇数、公式n。其语法格式如下：父元素子元素标签名:nth-child(n){属性:属性值;…}例如，下面的代码将div标签内第3个标签是p标签的元素设为红色；divp:nth-child(3){color:red;}当n为公式时，2n表示偶数（even），2n+1表示奇数（odd），5n表示5的倍数，n+5表示从第五个子元素（包含）开始至最后一个子元素，-n+5表示前五个子元素（包含第五个子元素）。三、伪元素伪元素用于创建一些不在文档（DOM）树中的元素，并为其添加样式。比如说，可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。1．::before该伪元素可在每个指定元素之前插入内容。其一般语法格式如下：元素::before{content:"…";…}例如，下面的代码将p元素前面插入文字“注意：”。p::before{content:"注意：";color:red;}需要说明的是，在某个标签前面插入内容的同时还可以设置插入内容的样式。2．::after在每个指定元素之后插入内容。其一般语法格式如下：元素:after{content:"…";…}例如，下面的代码将在div标签内每个p元素后面插入文字“-注意”：divp::after{content:"-注意";}需要说明的是，在某个标签后面插入内容的同时还可以设置插入内容的样式。3．::first-letter将特殊样式添加到文本的首字母。其一般语法格式如下：元素::first-letter{属性:属性值;…;}例如，下面的代码将在div标签内每个p元素首字符设置成红色，且放大1.5倍。p::first-letter{color:red;}4．::first-line将特殊的样式添加到文本的首行。其一般语法格式如下：元素::first-line{属性:属性值;…;}例如，下面的代码将p元素首行设成红色。p::first-line{color:red;}伪元素其实相当于伪造了一个元素，例如before，first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果；而伪类没有伪造元素，例如first-child只是给子元素添加样式。CSS3为了区分两者，规定了伪类用一个冒号（:）来表示，而伪元素则用两个冒号（::）来表示。任务四学习CSS嵌套前端开发人员，为了调高开发效率，一般都使用过CSS预处理器以及预处理器中的嵌套特性。而如今所有的主流浏览器都支持原生CSS嵌套。如Chrome、Firefox和Safari。这是一个重要的CSS功能，这将使编写CSS更加容易。例如下面的代码：div{border:1pxsolid#000;&h3{color:red;&span{color:blue;}}}等价于：div{border:1pxsolid#000;}divh3{color:red};divh3span{color:blue};CSS嵌套是一个重要的功能，它将增强编写CSS的能力。目前使用嵌套是可行的，但需