Web前端开发案例教程第5章

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