1、第5章 CSS3CSS3高级选择器德才兼备 知行合一掌握属性选择器；理解关系选择器；熟练使用结构化伪类选择器；掌握伪元素选择器。知识准备案例实现2德才兼备 知行合一5.15.25.3案例：景点介绍页面第5章 CSS3CSS3高级选择器结合高级选择器，利用HTML5和CSS3，实现景点介绍页面。单击图1中的某个景点时，显示如图2的效果。要求使用高级选择器，提高代码效率。5.1 案例：景点介绍页面3德才兼备 知行合一图1图25.2 知识准备 4德才兼备 知行合一第5章 CSS3CSS3高级选择器5德才兼备 知行合一HTML 3.2 5.2 知识准备使用高级选择选择器可以方便的定位于指定的元素，而不
2、用使用额外的class或id，通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。易控制灵活简洁 5.2.1 属性选择器属性选择器可以通过元素的属性来选择元素。本节将介绍CSS3新增的3种属性选择器：Eatt=val、Eatt$=val、Eatt*=val。Eatt=val属性选择器，是指选择名称为E，att属性值以val开头的元素。如pid=“txt”是指id属性值以txt字符串为前缀的p标记。E可以省略，如果省略则表示可以匹配满足条件的任意元素。1、Eatt=val属性选择器7德才兼备 知行合一 5.2.1 属性选择器Eatt$=val属性选择器，是指选择名称为E，att属性值以v
3、al结尾的元素。如pid$=“txt”是指id属性值以txt字符串为后缀的p标记。E可以省略，如果省略则表示可以匹配满足条件的任意元素。2、Eatt$=val属性选择器8德才兼备 知行合一 5.2.1 属性选择器Eatt*=val属性选择器，是指选择名称为E，att属性值包含val的元素。如pid*=“txt”是指id属性值包含txt字符串的p标记。E可以省略，如果省略则表示可以匹配满足条件的任意元素。2、Eatt*=val属性选择器属性选择器9德才兼备 知行合一 5.2.1 属性选择器10德才兼备 知行合一 5.2.1 属性选择器Eatt$=val属性选择器Eatt=val属性选择器EEat
4、tatt*=valval 属性选择器 5.2.2 关系选择器本节介绍3个关系选择器，分别是子代选择器（）、相邻兄弟选择器（+）、普通兄弟选择器（）。子代选择器主要用于选择某元素的第一级子元素，而且必须是第一级子元素。前面学习过的后代选择器用于选择某元素的子元素，只要是子元素都可以。1、子代选择器（）12德才兼备 知行合一 5.2.2 关系选择器相邻兄弟选择器（+）和普通兄弟选择器（）统称兄弟选择器。相邻兄弟选择器用“+”连接两个元素，这两个元素有相同的父元素，并且第二个元素紧跟第一个元素。普通兄弟选择器用“”连接两个元素，这两个元素有相同的父元素，第二个元素不必紧跟第一个元素。2、相邻兄弟选择
5、器（+）和普通兄弟选择器（）13德才兼备 知行合一 5.2.2 关系选择器14德才兼备 知行合一 5.2.2 关系选择器子代选择器（）相邻兄弟选择器（+）和普通兄弟选择器（）CSS3常用的结构化伪类选择器有:root选择器、:not选择器、:empty选择器、:target选择器、:only-child选择器、:first-child选择器、:last-child选择器、:nth-child（n）选择器、:nth-last-child（n）选择器、:nth-of-type（n）选择器、:nth-last-of-type（n）选择器。5.2.3 结构化伪类选择器:root选择器用于选择文档的根元
6、素。在HTML中，文档的根元素为html元素。因此:root选择器定义的样式，对本文档内所有元素生效。1、:root选择器16德才兼备 知行合一 5.2.3 结构化伪类选择器:not选择器又被称为否定选择器，可以选择除了某个元素之外的所有元素。2、:not选择器17德才兼备 知行合一 5.2.3 结构化伪类选择器:empty选择器用于来选择没有内容的元素。3、:empty选择器18德才兼备 知行合一 5.2.3 结构化伪类选择器:target选择器可用于选取当前活动的目标元素。当用户单击了超链接，而且此链接地址为本页面内的目标位置，:target选择器样式起作用。4、:target选择器19德
7、才兼备 知行合一 5.2.3 结构化伪类选择器only-child选择器用于匹配属于父元素中唯一唯一子元素的元素。也就是说，匹配元素的父元素中仅有一个子元素，而且是一个唯一的子元素。5、:only-child选择器20德才兼备 知行合一 5.2.3 结构化伪类选择器:first-child选择器和:last-child选择器分别用于选择父元素中的第一个或者最后一个子元素。如果父元素内子元素较多，我们可以用:nth-child（n）选择器和:nth-last-child（n）选择器分别来选择第n个或者倒数第n个元素。n可以为数值，也可以为odd（奇数）或even（偶数），odd和even分别代表
8、子元素中第奇数个子元素和第偶数个子元素。6、:first-child选择器和:last-child选择器、:nth-child（n）选择器和:nth-last-child（n）选择器21德才兼备 知行合一 5.2.3 结构化伪类选择器:nth-of-type（n）选择器、:nth-last-of-type（n）选择器分别用于选择父元素的特定类型的第n个子元素或倒数第n个子元素。7、:nth-of-type（n）选择器、:nth-last-of-type（n）选择器22德才兼备 知行合一 5.2.3 结构化伪类选择器23德才兼备 知行合一:root:root选择器:empty选择器:only-c
9、hild选择器:nth-of-type（n）选择器、:nth-last-of-type（n）选择器:not:not选择器:target选择器:first-child选择器、:last-child选择器、:nth-child（n）选择器、:nth-last-child（n）选择器 5.2.3 结构化伪类选择器伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。常用的伪元素选择器有:before:before选择器和:after:after选择器。在最新的CSS3标准中，伪元素选择器的格式改为双冒号，这两个元素可以写为:before、:after，但只兼容IE9以上的现代浏览器。如果为了往
10、下兼容，可以使用单冒号格式。5.2.4 伪元素选择器:before选择器用于在元素内部所有子元素之前插入内容，插入的内容必须用content属性值来设定。1、:before选择器25德才兼备 知行合一 5.2.4 伪元素选择器:after选择器用于在元素内部所有子元素之后插入内容，用法与:before选择器相同。2、:after选择器26德才兼备 知行合一 5.2.4 伪元素选择器27德才兼备 知行合一:after:after选择器:before:before选择器 5.2.4 伪元素选择器5.3 案例实现28德才兼备 知行合一第5章 CSS3CSS3高级选择器 5.3 案例实现30德才兼备 知行合一实训5感谢您的观看！感谢您的观看！德才兼备 知行合一
