《HTML5+CSS3》课件——第四章 CSS3选择器.pptVIP

4.4 伪元素选择器 :before选择器 :after选择器 :after选择器 :before选择器 :after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。 4.5 阶段案例——制作招聘页面 制作招聘页面 ? 第四章 CSS4选择器 关系选择器 属性选择器 链接伪类 HTML ? 学习目标 熟悉 掌握 理解 理解 熟悉CSS4中新增加的属性选择器。 1 2 理解关系选择器的用法。 理解常用的结构化伪类选择器。 3 掌握伪元素选择器的用法。 4 ? 目录 4.1 属性选择器 4.2 关系选择器 4.3 结构化伪类选择器 4.4 伪元素选择器 ?点击查看本小节知识架构 4.5 阶段案例——制作招聘页面 ?点击查看本小节知识架构 ?点击查看本小节知识架构 ?点击查看本小节知识架构 ? 知识架构 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 4.2.2 子元素选择器 相邻兄弟选择器 ? 知识架构 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.4 伪元素选择器 4.4.1 4.4.2 :before选择器 :after选择器 ? 知识架构 本章将详细介绍CSS中其他类型的选择器。 选择器是CSS3中一个重要的内容，在上一章中已经介绍过一些常用的选择器，这些选择器基本上能够满足设计者常规的设计需求。但在CSS3中还有一些选择器，使用这些选择器可以大幅度提高设计者书写和修改样式表的效率。 章节概要 4.1 属性选择器 本节将详细介绍这3种选择器。 属性选择器可以根据元素的属性及属性值来选择元素。CSS3中新增了3种属性选择器。 E[att^=value] E[att$=value] E[att*=value] 4.1 属性选择器 4.1.1 E[att^=value] 属性选择器 E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。 概 念 例如： div[id^=section] 表示匹配包含id属性，且id属性值是以“section”字符串开头的div元素。 4.1 属性选择器 4.1.2 E[att$=value]属性选择器 E[att$=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。 概 念 例如： div[id$=section] 表示匹配包含id属性，且id属性值是以“section”字符串结尾的div元素。 4.1 属性选择器 4.1.3 E[att*=value]属性选择器 E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。 概 念 例如： div[id*=section] 表示匹配包含id属性，且id属性值包含“section”字符串的div元素。 4.2 关系选择器 关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“”连接，兄弟选择器由符号“+”和“~”连接 本节将详细讲解这两种选择器。 4.2 关系选择器 4.2.1 子元素选择器 子元素择器主要用来选择某个元素的第一级子元素。 概 念 h1 strong 例如： 希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 strong。 4.2 关系选择器 4.2.2 相邻兄弟选择器（+、~） 兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。 概 念 临近兄弟选择器 普通兄弟选择器 4.2 关系选择器 4.2.2 相邻兄弟选择器（+、~） 兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。