（中职）Web前端设计基础 项目六-2电子课件

1、YCF正版可修改PPT（中职）Web前端设计基础 项目六-2电子课件CSS 3的选择器项目六授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备CSS 3基本语法；CSS 3引用方法；CSS 3新增选择器。CSS 3常用选择器；CSS 3常用选择器1.标签选择器HTML 5文档是由多个不同的标签组成，CSS 3的标签选择器就是声明哪个标签使用什么样式。标签选择器也叫元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。基本形式如图所示。CSS 3常用选择器1.标签选择器【例6-3】标签选择器实例

2、，代码如下所示（示例文件6-3.html）。标签选择器实例bodyfont-family: 微软雅黑;font-size: 16px;divwidth: 100px;height: 50px;background: red;标签选择器divwidth: 100px;height: 50px;background: red;在chrome浏览器中预览CSS 3常用选择器2.类选择器在一个页面中，使用标签选择器会控制该页面中所有的同名标签的显示样式。如果需要同名标签显示不同的样式，此时仅使用标签选择器是不能达到效果的，还需要使用类（Class）选择器。类选择器用来为一系列类名相同的标签定义相同的显

3、示样式，基本形式如图所示。类选择器的名称由编写者自己命名，前面必须要加上前缀“.”（英文点号），表明这是一个类选择器，否则该选择器无法生效。CSS 3常用选择器2.类选择器【例6-4】类选择器实例，代码如下所示（示例文件6-4.html）。类选择器实例bodyfont-family: 微软雅黑;font-size: 16px;.boxwidth: 100px;height: 50px;background: green;类选择器.boxwidth: 100px;height: 50px;background: green;在chrome浏览器中预览CSS 3常用选择器3.ID选择器在网页设计中

4、，可以为元素设置一个id，然后针对这个id进行CSS样式设置。由于ID选择器定义的是某一特定的HTML元素，所以在同一个页面中不允许出现两个相同的id。基本形式如图所示。ID选择器的名称由编写者自己命名，前面必须要加上前缀“#”，表明这是一个ID选择器，否则该选择器无法生效。CSS 3常用选择器3.ID选择器【例6-5】ID选择器实例，代码如下所示（示例文件6-5.html）。ID选择器实例bodyfont-family: 微软雅黑;font-size: 16px;#boxwidth: 100px;height: 50px;background: blue;color:white;ID选择器#

5、boxwidth: 100px;height: 50px;background: blue;color:white;在chrome浏览器中预览CSS 3常用选择器4.全局选择器如果一个页面中的所有HTML标签都使用一种样式，可以使用全局选择器。基本形式如下：“*”表示设置的样式对所有元素都起作用。*属性:值;CSS 3常用选择器5.伪类选择器伪类选择器定义的样式通常用在标签上，表示链接的四种不同的状态：未访问链接（link）、已访问链接（visited）、激活链接（active）和鼠标指向链接（hover）。基本形式如下：a:状态名称属性:值;CSS 3常用选择器5.伪类选择器【例6-6】全局

6、和伪类选择器实例，代码如下所示（示例文件6-6.html）。全局、伪类选择器*font-family: 微软雅黑;font-size: 12px;a:linkcolor:red;a:visitedcolor:green;a:activecolor:blue;a:hoverfont-size:16px;color:#f0f; 链接到本页链接到百度在chrome浏览器中预览CSS 3常用选择器6.组合选择器子元素选择器父元素与子元素必须用空格隔开，用来表示某元素下的子元素。子元素选择器即为某元素下的子元素，对该子元素设置CSS样式，基本形式如图所示。CSS 3常用选择器6.组合选择器【例6-7】子

7、元素选择器实例，代码如下所示（示例文件6-7.html）。子元素选择器实例#fathercolor:red;#father pcolor:green;子元素选择器子元素选择器子元素选择器在chrome浏览器中预览子元素选择器CSS 3常用选择器6.组合选择器相邻选择器相邻选择器即为某元素的兄弟元素，相邻选择器的操作对象是该元素的同级元素。基本形式如图所示。CSS 3常用选择器6.组合选择器相邻选择器【例6-8】相邻选择器实例，代码如下所示（示例文件6-8.html）。相邻选择器实例#boxcolor:red;#box+pcolor:green;相邻选择器相邻选择器相邻选择器在chrome浏览器

8、中预览CSS 3常用选择器6.组合选择器群组选择器群组选择器即为同时对几个选择器进行相同的CSS样式设置，基本形式如图所示。两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。CSS 3常用选择器6.组合选择器群组选择器【例6-9】群组选择器实例，代码如下所示（示例文件6-9.html）。群组选择器实例h3,div,#box,pcolor:red;群组选择器群组选择器群组选择器群组选择器在chrome浏览器中预览CSS 3新增选择器1. 属性选择器属性选择器，顾名思义就是通过属性来选择元素的一种方式。其实属性选择器在CSS2中已经存在了，而CSS3在CSS2的基础上对属性选择器

9、进行了扩展，新增了3个属性选择器，除ie6外的大部分浏览器支持。属性选择器说明Eattr=val属性att的值以val开头的元素Eattr$=val属性att的值以val结尾的元素Eattr*=val属性att的值包含val字符串的元素CSS3新增的属性选择器表中E指的是元素名element；attr指的是属性名attribute；val指的是属性值values。CSS 3新增选择器1. 属性选择器【例6-10】群组选择器实例，代码如下所示（示例文件6-10.html）。属性选择器实例/*匹配href属性以i开头的a元素*/ahref=icolor:red;/*匹配href属性以html结尾的

10、a元素*/ahref$=htmlfont-size: 20px;font-family: 微软雅黑;color:green;/*匹配href属性包含字符串3的a元素*/ahref*=3background: silver;项目一项目二项目三在chrome浏览器中预览CSS 3新增选择器2. 结构伪类选择器结构伪类选择器可以根据DOM（文档对象模型）树中元素的相对关系来匹配特定的元素，其语法如表所示。结构伪类选择器选择器功能描述E:first-child作为父元素的第一个子元素的元素E。与E:nth-child(1)等同E:last-child作为父元素的最后一个元素的元素E，与E:nth-la

11、t-child(1)等同E:root匹配E元素所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同E F:nth-child(n)选择父元素E的第n个子元素F，其中n可以是整数(1、2、3)、关键字（even, odd）、可以是公式（2n+1、-n+5）,而且n起始值为1不是0E F:nth-last-child(n)选择n的倒数第n个子元素。次选择器与E F:nth-child(n)选择器计算顺序刚好相反，但是使用方法都是一样的，其中，:nth-last-child(1)始终匹配的是最后一个元素,与:last-child等同E:nth-of

12、-type(n)选择父元素内具有指定类型的第n个E元素E:nth-last-of-type(n)选择父元素内具有指定类型的倒数第n个E元素E:first-of-type选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同E:only-child选择父元素只包含一个子元素，且该子元素匹配E元素E:only-of-type选择父元素只包含一个同类型的子元素，且该子元素匹配E元素E:empty选择没有子元素的元素，且该元素也不包含任何文本节点：CSS 3新增选择器2. 结构伪类选择器结构伪类选择器中，有四个伪类选择器接受参数n：:nth-child(n):nth-last-

13、child(n):nth-of-type(n):nth-last-of-type(n)在实际应用中，这个参数可以是整数（1、2、3、4）、关键字（even，odd），还可以是公式(2n+1, -n+5),但是无论是整数关键字还是公式最终其值都是从1开始，而不是0.换句话说，当上述四个伪类选择器中参数n的值为0（或者是负值）时，选择器将选择不到任何的元素。CSS 3新增选择器2. 结构伪类选择器可以将结构伪类选择器中的参数按照常用情况分为七种情形：1. 参数n为具体的数值2. 参数n为表达式n*length3. 参数n为表达式n+length4. 参数n为表达式-n+length5. 参数n为表

14、达式n*length + b6. 参数n为关键词odd7. 参数n为关键词evenCSS 3新增选择器3. UI元素状态伪类选择器UI，是用户界面（User Interface）的意思。UI元素状态伪类选择器指的是“UI元素状态”这方面的伪类选择器。UI元素状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。UI元素状态伪类选择器大多数都是针对表单元素来使用的。共11种分别为：E:hover、E:active、E:focus、E:enable、E:disable、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E:selectionCSS 3新增选择器3. UI元素状态伪类选择器CSS3新增的UI元素状态伪类选择器，如表所示。选择器说明E:hover指定鼠标经过（悬停）元素时的样式E:active制定鼠标点击（但未松开）元素时的样式E:focus指定元素获得光标焦点时使用的样式E:checked选择E元素中所有被选中的元素E:selection改变E元素中被选择的网页文本的显示效果E:enabled选择E元素中所有“可用”元素