私立华联学院：《html5》课程教学资源（课件讲稿）第4章 CSS3选择器

第4章CSS3选择器 ·属性选择器 •关系选择器 HTML5 •结构化伪类选择器 .CSS层叠性、继承性与优先级 •链接伪类

让IT教学更简单，让IT学习更有效 第4章 CSS3选择器 HTML5 ·关系选择器 ·CSS层叠性、继承性与优先级 ·属性选择器 ·结构化伪类选择器 ·链接伪类 HTML5

学习目标 掌握CSS3中新增加的 理解关系选择器的用 属性选择器，能够运 法，能够准确判断元 用属性选择器为页面 素与元素间的关系。 中的元素添加样式。 掌握 理解 娜 掌握伪元素选择器的使 掌握常用的结构化伪 用，能够在页面中插入 掌握 类选择器，能够为相 所需要的文字或图片内 同名称的元素定义不 容。 同样式。 掌握CSS伪类，会使用 CSS伪类实现超链接特 效

✎ ✎ 学习目标 掌握CSS3中新增加的 属性选择器，能够运 用属性选择器为页面 中的元素添加样式。 1 掌握伪元素选择器的使 用，能够在页面中插入 所需要的文字或图片内 容。 4 2 理解关系选择器的用 法，能够准确判断元 素与元素间的关系。 3 掌握常用的结构化伪 类选择器，能够为相 同名称的元素定义不 同样式。 掌 握 掌握CSS伪类，会使用 CSS伪类实现超链接特 5 效

目录 4.1 属性选择器 一点击查看本小节知识架构 4.2 关系选择器 点击查看本小节知识架构 4.3 结构化伪类选择器 点击查看本小节知识架构 4.4 伪元素选择器 一点击查看本/小节知只构 4.5 链接伪类 40 4.6 阶段案例一制作网页设计软件列表

✎  目录 属性选择器 ☞点击查看本小节知识架构 关系选择器 ☞点击查看本小节知识架构 结构化伪类选择器 伪元素选择器 链接伪类 阶段案例—制作网页设计软件列表 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构

四知识架构 今返回目录 4.1属性选择器 4.1.1………。E[att=value]属性选择器 4.1.2 E[att$=value]属性选择器 4.1.3 E[att*=value]属性选择器 y

✎  知识架构 4.1 属性选择器 4.1.1 E[att^=value] 属性选择器 4.1.2 E[att$=value]属性选择器 4.1.3 E[att*=value]属性选择器

四知识架构 奇返回目录 4.2元素的类型与转换 4.2.1………0 子代选择器（>) 4.2.2 兄弟选择器（+、~)

✎ 4.2 元素的类型与转换 4.2.1 4.2.2 子代选择器（>） 兄弟选择器（+、~）  知识架构

四知识架构 今返回目录 4.3块元素垂直外边距的合并 4.3.1 :root选择器 4.3.2 …*……● :not选择器 4.3.3…● :only-child选择器 4.3.4……9 :first-child和：last-child选择器 4.3.5 ………@ :nth-child(n)和：nth-last-child(n)选择器 4.3.6 :nth-of-type(n)和：nth-last-of-type(n)选择器 4.3.7 :emptyi选择器 4.3.8 :targeti选择器 y

✎ 4.3 块元素垂直外边距的合并 4.3.1 :root选择器 4.3.2 :not选择器 4.3.3 :only-child 选择器 4.3.4 :first-child和:last-child选择器 4.3.5 :nth-child(n)和:nth-last-child(n)选择器 4.3.6 :nth-of-type(n)和:nth-last-of-type(n)选择器 4.3.7 :empty选择器 4.3.8 :target选择器  知识架构

四知识架构 奇返回目录 4.4伪元素选择器 4.4.1………●：beforei选择器 4.4.2……… :afteri选择器

✎ 4.4 伪元素选择器 4.4.1 4.4.2 :before选择器 :after选择器  知识架构

CSS3选择器 CSS3中新增的多种选择器，使用它可以大幅度提高开 发人员书写和修改样式表的效率。 本章将向读者介绍CSS3中新增的多种选择器。通过本章的学习， 读者可以 更轻松的控制网页元素

✎ CSS3选择器 CSS3中新增的多种选择器，使用它可以大幅度提高开 发人员书写和修改样式表的效率。 本章将向读者介绍CSS3中新增的多种选择器。通过本章的学习，读者可以 更轻松的控制网页元素

,41属性选择器 属性选择器可以根据 E[att^=value] 元素的属性及属性值 来选择元素。CSS3 E[att$=value] 中新增了3种属性选 择器。 E[att*=value] 色

✎ 4.1 属性选择器 属性选择器可以根据 元素的属性及属性值 来选择元素。CSS3 中新增了3种属性选 择器。 E[att^=value] E[att$=value] E[att*=value]

41属性选择器 4.1.1 E[attA=value]属性选择器 E[att=value]属性选择器是指选择名称为E的标记，且该标记定义了 att属性，att属性值包含前缀为value的子字符串。 注意 E是可以省略的，如果省略则表示可 以匹配满足条件的任意元素

✎ 4.1 属性选择器 4.1.1 E[att^=value] 属性选择器 E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了 att属性，att属性值包含前缀为value的子字符串。 E是可以省略的，如果省略则表示可 以匹配满足条件的任意元素